|
JavaScript - .scrollto Jquery Plug-in Not Working. A Little Help Please..
Hey guys, im pretty new to using Jquery and coding period. i came across a problem with the .scrollto plug-in and i have searched up and down for an answer and none would really solve the problem. im trying to run .scrollto to jump from one div to the next with a smooth animation in a horizontal website. this is what the head tag looks like so far
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script src="scripts/jquery.localscroll-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $.localScroll(); }) </script> i tried removing either local scroll or scrollTo and see if there was a conflict but that wasnt the case. ive seen the script run on a webpage without having to add $.localScroll(); to every link, right now it just doesn't move at all. any help would be greatly appreciated. Similar TutorialsHi I am having a problem with that code : Code: <!DOCTYPE html>
<html>
<head>
<title>ScrollTo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
</head>
<body>
<div id="sections">
<ul>
<li id="s1">
<h2>Section 1</h2>
</li>
<li id="s2">
<h2>Section 2</h2>
</li>
<li id="s3">
<h2>Section 3</h2>
</li>
<li id="s4">
<h2>Section 4</h2>
</li>
<li id="s5">
<h2>Section 5</h2>
</li>
</ul>
</div>
</div>
<a href="#" onclick="$('#sections').scrollTo($("#s5"));>#5</a>
</body></html>
onclick="$('#sections').scrollTo($("#s5")); is not working thank you for helping Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file. Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. I have a menu on my site that is not working in IE. It works fine in Safari and Firefox, but it doesnt even open the link for the correspoding button. It just stays on the home page. Someone told me it was the google analytics, but I changed the menu portion of the code and added the gaq_push and the trackEvent, but it's still not working. Help guys, thanks.
When my page loads, it automatically jumps down as if it were jumping to a named anchor. It's more apparent on longer pages (doesn't replicate if page fills screen). Happening in Win FF/IE/Chrome Disabling stylish-select.js (from http://www.prismstudio.co.uk/2009/05...x-replacement/ where he used to allow comments but not anymore) fixes it, but I don't know enough Javascript to debug, would really appreciate if somebody could have a look. Good example at http://studiohodson.com/projects/Bea...restaurant.php Script is at http://studiohodson.com/projects/Bea...lish-select.js Thank you thank you! 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..... Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs 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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. Thank you in advance for your help with this. I have two pages. One page with thumbnails and another page with the actual gallery. On the gallery.html page I can scroll to my 5th image in the list by the following code: onclick="myScroll.scrollToPage(5,5)" I want to achieve this same effect from the index.html file into the gallery.html file. I have tried using anchored links like #image5, but that just messes up the page and the iscroll script I am working off of. Thank you again anyone who can help. Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
At the bottom of my document (pageA), I have an iframe like this: <iframe src="pageB.html#anchor" ... pageA opens with the iframe at position 0,0. <body onload="window.scrollTo(0,0)" ... works for FF but not for IE(8). How could this be fixed in IE? Hi, I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum. What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma. I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page). Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated. Code: CSS
body {
background: black;
text-align: center;
vertical-align: middle;
}
div#bkg {
position: absolute;
text-align: center;
z-index: 1;
}
p#day1 {
position: absolute;
top: 800px;
left: 1000px;
font-weight: bold;
width: 50px;
background: white;
}
Javascript
function showVid(srcVid) {
// set the proper filename of the vid
srcVid = srcVid + ".ogv";
// create the video tag
var vidWin = document.createElement("video");
vidWin.id = "movie";
vidWin.setAttribute("width", "320");
vidWin.setAttribute("height", "240");
vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
var vpw = window.innerWidth;
var vph = window.innerHeight;
var xPosOff = window.pageXOffset;
var yPosOff = window.pageYOffset;
var leftNum = ((vpw/2) + xPosOff) - 160;
var topNum = ((vph/2) + yPosOff) - 120;
vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
var vidSrc = document.createElement("source");
vidSrc.src = "videos/" + srcVid;
vidSrc.type = "video/ogg";
vidSrc.codecs = "theora, vorbis";
vidWin.appendChild(vidSrc);
document.getElementById('bkg').style.opacity = 0.5;
document.body.appendChild(vidWin);
window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
// location.reload(false);
}
HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>
I'm running my web page on IE8+9 with Windows Home via Boot Camp. My JS code is: Code: if (QuicktimeIsPresent)
{
var song = PlaySong('200', '50', '#9cceff', 'false', 'false', 'tunes/taps.mov')
document.write (song)
}
The JS code for PlaySong is: Code: function PlaySong(width, height, bgcolor, autostart, loop, songloc)
{
var play = ''
if (songloc == '') return play
// default values ...
if (width == '') width = '200'
if (height == '') height = '50'
if (bgcolor == '') bgcolor = '#FFFFFF'
if (autostart == '') autostart = 'true'
if (loop == '') loop = 'false'
play = '<OBJECT NAME="Midi"\n' +
' ID="song"\n' +
' CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"\n' +
' CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"\n' +
' WIDTH="' + width + '" HEIGHT="' + height + '"\n' +
' LOOP="' + loop + '">\n' +
' <PARAM NAME="bgcolor" VALUE="' + bgcolor + '">\n' +
' <PARAM NAME="autostart" VALUE="' + autostart + '">\n' +
' <PARAM NAME="filename" VALUE="' + songloc + '">\n\n' +
'<EMBED NAME="song"\n' +
' PLUGINSPAGE="http://www.apple.com/quicktime/download/"\n' +
' TYPE="audio/x-midi"\n' +
' WIDTH="' + width + '" HEIGHT="' + height + '"\n' +
' LOOP="' + loop + '"\n' +
' BGCOLOR="' + bgcolor + '"\n' +
' AUTOSTART="' + autostart + '"\n' +
' SRC="' + songloc + '">\n' +
'</EMBED>\n\n' +
'</OBJECT>\n'
return play
}
For IE8+9, the quicktime crescendo/midi control shows .. but when I click the play button on it, it almost immediately stops. Other Windows browsers(Firefox and Safari and IE 7) play just fine, together with all Macintosh browsers. I really need some help here ... thanks in advance. BTW, here's the link. John Love I'm not entirely sure this is possible. I hope it is, and it doesn't seem to far-fetched or impossible. With JS, how would one go about checking if a user has DivX Web Player installed? Usually people put in code within the embed, so if it the player doesn't load, it would have the message behind stating the fact. However I haven't seen this used at all with DivX, instead, you see pop-up boxes, whether installed or not, stating "Don't have DivX Web Player? Get it here for windows or mac" I find this extremely annoying, and would never want such informalities on my website. This code works in all browsers, Safari, Chrome, Firefox, but not IE 8 in which I'm testing right now for version. The code is below: Code:
<script type="text/javascript">
$(document).ready(function() {
$('#form_{picture_id}').ajaxForm(function() {
$(function() {
setTimeout(function() {
$("#picture_description").show('blind', {}, 800)
}, 1000);
setTimeout(function() {
$("#picture_description").hide('blind', {}, 800)
}, 11000);
});
});
});
</script>
What am I doing wrong. The code simply calls the form, then shows a DIV via BLIND then hides it using the same effect. The picture_id in {} is simply smarty PHP. Any help is much much appreciated! I tried setting the scripts in different order but it didn't work. I tested it in all browsers and IE is the only one not cooperating. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link rel="stylesheet" type="text/css" href="../css/norma_style.css" media="all"/> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="../css/ie7fix.css" media="all" /> <![endif]--> <script type="text/javascript" src="../css/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="../css/jquery.cycle.all.latest.js"></script> <script src="../css/kwick/kwicks1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... speed: 2000, random: 1 }); }); </script> <script type="text/javascript"> $().ready(function() { $('#example .kwicks').kwicks({ max: 500, spacing: 5 }); }); </script> </head> JAVASCRIPT (move.js); Code: <script type="text/javascript">
$().ready(function()
{
$('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script>
HTML: Code: <script src="includes/js/move.js"></script> <div id="ex3" class="jqDnR"> <div class="jqHandle jqDrag"></div> <br /> MY DATA <div class="jqHandle jqResize"></div> </div> i have made one page this is page link http://pickthefights.com/fantansy-fi...482&page=fight the code of this page is this <script type="text/javascript"> //////////////////////////////// // // Refreshing the DIV FANBOO2 // //////////////////////////////// function refreshdiv_fanboo2(){ // Customise those settings var seconds = 1; var divid = "fanboo2"; var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>"; // Create xmlHttp var xmlHttp_two = AJAX(); // No cache var timestamp = fetch_unix_timestamp(); var nocacheurl = url+"?t="+timestamp; // The code... xmlHttp_two.onreadystatechange=function(){ if(xmlHttp_two.readyState==4){ document.getElementById(divid).innerHTML=xmlHttp_two.responseText; setTimeout('refreshdiv_fanboo2()',seconds*1000); } } xmlHttp_two.open("GET",nocacheurl,true); xmlHttp_two.send(null); } // Start the refreshing process window.onload = function startrefresh(){ setTimeout('refreshdiv_fanboo2()',seconds*1000); } </script> <script type="text/javascript"> refreshdiv_fanboo2(); </script> <div name="fanboo2" id="fanboo2"></div> now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight </script> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').bxSlider(); }); </script> <ul id="slider1"> <li>Slide one content</li> <li>Slide two content</li> <li>Slide three content</li> <li>And so on...</li> </ul> please help me out i want to make java script work on both of this page I have a page that has a simple AJAX call that works fine in firefox and chrome but not in ie. In IE my loading image shows up but the actual sourceURL never loads or shows. Below is my html and javascript code. Can anyone help me with this? <div id="design_strap" style="display:none"> <a href="javascript:loadContent('#content', 'strap.html');">Link</a> <div id="content"></div> </div> <script type="text/javascript"> $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); function loadContent(elementSelector, sourceUrl) { $(""+elementSelector+"").html('<p><img src="images/loading.gif" width="150" height="150" /></p>'); $(""+elementSelector+"").load(""+sourceUrl+""); //$("content").height(350); } </script> It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works. When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return. I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks! http://www.denver-website-designer.com/quote.html <script type="text/javascript"> $().ready(function() { var erroralert = $("#quoteForm").bind("invalid-form.validate", function() { $("#erroralert"); }); }); $.metadata.setType("attr", "validate"); $.validator.addMethod("ninja", function(value) { return value == "ninja"; }, 'Can a robot spell "ninja"'); $().ready(function() { $("#quoteForm").validate({ errorContainer: $("#erroralert"), rules: { fullname: { required:true, minlength:2, }, email: { required:true, email:true, }, phone: { required:true, minlength:10, maxlength:15, }, pages: { required:true, minlength:1, maxlength:10, number:true }, whyrate: { required:true, minlength:10, }, ninja: "ninja", }, messages: { email: "Please enter a valid email address", pages: "Numeric values only", } }); }); </script> Hello all I have a problem implementing too JQuery tools; Cycle and Fullsize (together). I have uploaded an example over at: http://lawrencebrown.eu/jquery/index.html The problem is that only the first image pics up the Full size script, I have bene told by a friend to add the following into code into the cycle script: Code: after: function () {
*$("div.album img").fullsize();
}
I have tried putting this in different places from lines 19 to 43 on index.html with no winning results yet. Any help you can offer to the mark up between lines 19 to 43 would be great. I appreciate that their are plenty of other lightbox solutions that can solve this problem - I have even had a few up and running, however this is a specific request on this job to use Fullsize. Full size docs: http://www.addfullsize.com/ Cycle docs: http://malsup.com/jquery/cycle/ Thanks for you time Lawrence |
|||||||