July 22, 201016 yr Hi Thank again for the couple of members that took the time to reply. I have found a slider/scroller resource and adapted it for my website, please see below: http://www.acknowledgedtest.info/home-slider.html The problem is that I have had to remove the following js from the bottom of the <body>; <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> <script type="text/javascript" src="js/jquery.nivo.js"></script> <script type="text/javascript" src="js/cufon.js"></script> <script type="text/javascript" src="js/Geometr231_Hv_BT_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script> and without this the main image banner animation will not work. How can I have both working? If I replace the js above the top banner animation works perfectly but then the 3 box slider at the bottom doesn't ? http://www.acknowledgedtest.info/index2.html ARGGGGGGG so close yet not... Please help me, how can I get both to work on the page together, or is there another way around this. thanks Ash
July 22, 201016 yr Author Oh OK sorry I included the index2.html just to show how the top scroller works as it didn't on the other. The Premiere Opticians now has everything on it, the top animation works fine but when you click 'next' on the text box slider underneath, the slide/scroll doesn't take place. I've added all the js files (as mentioned on the original post) one at a time and it definitely seems to be the "js/jquery.js" that's causing the problems, I presume it a conflict somewhere but my experience is with Xhtml and Css, my js knowledge isn't so good ? The slider should work like this by the way; Horizontal Carousel
July 22, 201016 yr this still has the same problem i pointed out in your last post, referring to div id's you need to replace your slider code with this... <script type="text/javascript"> $(document).ready(function() { //vars var conveyor = $(".content-conveyor", $("#sliderContent")), item = $(".item", $("#sliderContent")); //set length of conveyor conveyor.css("width", item.length * parseInt(item.css("width"))); //config var sliderOpts = { max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")), slide: function(e, ui) { conveyor.css("left", "-" + ui.value + "px"); } }; //create slider $("#myslider").slider(sliderOpts); }); </script> and change the code for the actual slider bar from... <div id="slider"></div> to <div id="myslider"></div> You also have 2 different versions of jQuery loadsing, so get rid of one.
July 23, 201016 yr Author Thanks guys, I am really keen to use this newer version though with the arrows, rather than slider. Is it the same problem ?
July 23, 201016 yr That uses mootools instead of jQuery, the same effect can be achieved using jQuery easing animations so i suggest you find a jQuery version of it, or change your top carousel to mootools as well, to avoid using both jQuery and mootools in the same page. You can run them in compatibility mode but its just a pain in the ass and it means your users need to load up an extra 70Kb of javascript.
July 23, 201016 yr Author You are saying change to Jquery from Mootools, but then there will be 2 Jquery, which you also say not to do. This is really starting to hurt my brain, I am more than happy to pay someone to just get this work for me. I tried the myslide code above (which is for the earlier slider that I was tring) and this doesn't work either I'm afraid Jock. The code in this case now reads: <div id="myslider"></div> </div> <script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //vars var conveyor = $(".content-conveyor", $("#sliderContent")), item = $(".item", $("#sliderContent")); //set length of conveyor conveyor.css("width", item.length * parseInt(item.css("width"))); //config var sliderOpts = { max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")), slide: function(e, ui) { conveyor.css("left", "-" + ui.value + "px"); } }; //create slider $("#myslider").slider(sliderOpts); }); </script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> <script type="text/javascript" src="js/jquery.nivo.js"></script> <script type="text/javascript" src="js/cufon.js"></script> <script type="text/javascript" src="js/Geometr231_Hv_BT_400.font.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html> is that right?
July 23, 201016 yr I had this problem with mootools and jquery. What fixed it for me was using 'jQuery no Conflict' http://api.jquery.com/jQuery.noConflict/ eg, Instead of this: - <script type="text/javascript"> $(function() { $('#container-1').tabs(); }); </script> Use This: - <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { jQuery('#container-1').tabs(); }); </script> So you are replacing everywhere you see a $ with jQuery within your scripts in the html page, where needed. Another thing might be the arrangement in which you have you <script> </script> files in, try moving them around in a different order within the <head> tag or even put them at the bottom of the page before the </body> tag. You might want to have a look at the source behind my 4 page design package on my site: - http://www.pbwebdesign-warrington.co.uk/fourpagewebsitedesign.html As this uses alot of query and mootools etc. Hope this helps you. I know i had nightmares over it! lol
July 23, 201016 yr Like pbul2004 said script file $.noConflict(); jQuery(document).ready(function($) { // Apply fancybox on all images $("a[href$='gif']").fancybox(); $("a[href$='jpg']").fancybox(); $("a[href$='png']").fancybox(); // Font replacement Cufon.replace('#logo .title'); Cufon.replace('h1'); // Slider $('#slider .descriptions .description:first').show(); $('#slider .slides').nivoSlider({ effect: 'random', slices: 12, animSpeed: 600, pauseTime: 6000, startSlide: 0, //Set starting Slide (0 index) directionNav: true, //Next & Prev directionNavHide: false, //Only show on hover controlNav: true, //1,2,3... controlNavThumbs: false, //Use thumbnails for Control Nav controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src keyboardNav: true, //Use left & right arrows pauseOnHover: false, //Stop animation while hovering manualAdvance: false, //Force manual transitions captionOpacity: 1.0, //Universal caption opacity beforeChange: function(){}, afterChange: function(){ currentSlide = $('#slider .slides').data('nivo:vars').currentSlide $('#slider .descriptions table').each(function (index, value) { if (index == currentSlide) { $('#slider .descriptions table').hide(); $(this).show(); } }); }, slideshowEnd: function(){} //Triggers after all slides have been shown }); // Validate contact form $('#contact_form').validate(); // AJAX contact form $('form#contact_form').submit(function() { if ($('label.error:visible').length !== 0) { return false; } var s = $(this).serialize(); if (($(this).attr('action') === '') || ($(this).attr('action')==='#')) action = '?'; else action = $(this).attr('action'); $.ajax({ type: $(this).attr('method'), data: s, url: action, success: function(result) { if (result == '1') { alert('E-mail sent'); $('form#contact_form')[0].reset(); } else { alert('E-mail can not be sent!'); } return false; } }); return false; }); $('.slider .slides img').css({'visibility': 'visible'}); }); Also if you remove the href="#" from the a tags it will stop the page jumping <div id="slider-buttons"> <a id="previous2"><img src="images/leftarrow.gif" alt="back" /></a> <a id="next"> <img src="images/rightarrow.gif" alt="next" /></a> </div>
July 23, 201016 yr Author OK That's bloody brilliant, I've just been sitting here recreating the top slider in Flash, as I'd pretty much given up. It works perfectly in IE 7 and IE8 but not in FF, where it still just jumps? see now: http://www.acknowledgedtest.info/Final%20Design/index.html Again thanks you so much.
July 24, 201016 yr Author OK that actually seems to be working now, with the url full links. Wow thanks for all your time and help mteam, usually you get very little interest for such questions on these type of forums, your truely are a legend. Ash
Create an account or sign in to comment