jQuery Forum

Hello there.

I am developing a shopping cart section for a client at the moment and so far it is going well.

I have developed a nice page with a scrolling set of thumbs that when clicked open the jewellery images on the right using cycle all plugin. Then I have another element that when you click the larger image on the right you have a zoom effect with it. Now I want this to happen to every image that is clicked on that appears in the right.

The problem I am having is that it works when I click each one but I get this weird browser inconsistency in it that either loads the image up and flashes back or it just places the right image below it, and this is on the images that have the zoom plugin attached to them only. No other images.

Is their an issue with the plugins or is there a way I can get around this with image loading etc etc. Or if anyone knows another plugin thats similar that would work with cycle it would be great. I have tried many and this is the only one that works at the min with cycle all to a point.

The link here; http://review.markdunbavan.co.uk/biju/bracelets.html

If anyone has any suggestions or help to this I would be happy to listen.

Thanks,
Mark

Hello.

I have been writing my own jquery for a function that basically loads a page via ajax into a hidden div. Then on click of a button it slides out a div and slides in the hidden div and fades that in under it. I have created this effect for the other button too and it works like a treat every time, but I am having a slight problem and that is the effect works but not every time. The basic effect I am trying to achieve is when you click 'about button' to have the portfolio section slide out and the about page slide in and then when you click on 'contact button' the about page slides out the same and the 'contact page' slides in under it and vice versa.

I think I have all the basic elements there but it seems like there are just a few small tweaks that need doing to make it work seamlessly throughout. Would anyone have any idea as to what would need tweaking to enable this to work properly. Here is the test url for you to see;

www.markdunbavan.co.uk/dev/OS

I would love some help on this as I am really trying my hardest to figure out this small  issue.

Thanks

Mark

Hi.

I am trying to develop a part of a site that requires ajax content to be loaded onto it via a server. I have made the content load and scroll up into view but for some reason the footer goes with it so instead I just had it fade in from display hidden. Here is the link.

http://www.markdunbavan.co.uk/dev/OS

The other problem I am facing is I want the about button to be able to do exactly the same thing as the contact button does but at the min its really complicated. Here is the code I used;

1. $(document).ready(function(){
2.     $('.log').ajaxStart(function() {
3.   $(this).text('Triggered ajaxStart handler.');
4. });
5. $('#contactbutton').click(function() {
6.   $('.result').load('pages/index.html');
7.   $('#contactcontent').delay(600).fadeIn(1400);
8.     $('#contactcontent').fadeIn(1400).animate({
9.     overflow: 'hidden',
10.     opacity: '1.0',
11.     marginTop: '0px',
12.   }, {
13.     duration: 1000,
14.     specialEasing: {
15.       top: 'easeInOutQuad'
16.     },
17.   });
18.   $('#folio').animate({
19.     top: '-900px',
20.     opacity: '0.2',
21.     overflow: 'hidden'
22.   }, {
23.     duration: 1000,
24.     specialEasing: {
25.       top: 'easeInOutQuad'
26.     },
27.   });
28. });
29. });
30. $(document).ready(function(){
31. /*next ajax loader section for about page also*/
32. $('.log2').ajaxStart(function() {
33.   $(this).text('Triggered ajaxStart handler.');
34. });
35. $('#aboutscrollbutton').click(function() {
36.   $('.result2').load('pages/about.html');
37.   $('#aboutcontent2').delay(600).fadeIn(1400);
38.     $('#aboutcontent2').fadeIn(1400).animate({
39.     overflow: 'hidden',
40.     opacity: '1.0',
41.     marginTop: '0px',
42.   }, {
43.     duration: 1000,
44.     specialEasing: {
45.       top: 'easeInOutQuad'
46.     },
47.   });
48.   $('#folio').animate({
49.     top: '-900px',
50.     opacity: '0.2',
51.     overflow: 'hidden'
52.   }, {
53.     duration: 1000,
54.     specialEasing: {
55.       top: 'easeInOutQuad'
56.     },
57.   });
58. });
59. });

I am having trouble making this work. Would anyone know how to do this sort of thing?

regards

Mark Dunbavan

Hello.

My name is Mark. I am working on a site at the moment that involves the use of the scrollTo plugin by Ariel Flesler. The plugin is great and I am having fun with it but there has been a development area that I seem to be having trouble with. I am loading a page via ajax like so;

I am then calling the scrollTo function after the setInterval within the ajax request but... I am having trouble making this look anything like it should do. The idea came from a site like this; www.imagemechanics.com.au

Is this something that will work hand in hand with the scrollTo function? If not is there another way I can do this sort of thing with the setInterval and scrollTo plugin?

Any help would be greatly appreciated for this.

Regards

Mark

1. $(document).ready(function(){
       $('.log').ajaxStart(function() {
     $(this).text('Triggered ajaxStart handler.');
   });
   $('#scrollerbutton').click(function() {
   var refreshId = setInterval(function(){
       var r = (-0.5)+(Math.random()*(1000.99));
     $('.result').load('terms.html#clients_div');
     }, 5000);
   });
   });

Hi,

I am trying to create a fade and slide effect in the cycle plugin.

Basically the reason for this is I am finding the slideHorz function a bit too harsh so I need a fade on
that too so it slides and fades out together.

Is there any way to create this with the plugin or is it a much more complicated process?

Thanks

Mark

Hello Everyone.

I am not sure if you have seen the supersized plugin but its a great piece of development by a guy called Sam Dunn via build internet. Its got great full screen features for galleries.

I have been trying to develop this a little further for myself and for my specific requirements.

I am not sure if anyone knows how to create a cue for the images to slide into view with this plugin or not because at he min the slides just slide across right next to each other.

Does anyone know how to do this with supersized if not does anyone know of an equally good way of doing this without supersized that has the ability to create a cue for image to slide in.

Thanks

Mark

Hi My name is Mark.

I am a new web developer and I am creating a news feed that uses carousel lite to make it scroll.

Currently the script runs and it calls the function to scroll from the content in the div elements on the html
document. This would obviously depend on the content in the divs. The problem I am having now is the content needs to be more easily updated using live text from an rss feed or from the server. I know that ajax is a good place to start but I would not have a clue with where to start with it.

I can attach the documents I am working on if you need to understand more as I know this is probably going to be a massive headache for me to figure out.

Any help on this matter would be greatly appreciated.

Regards,

Mark

Hi.

I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got.

I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text.

I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code so you can see how its done please let me know.

This is the CSS;

1. ul, li {
       margin: 0;
       padding: 0;
   }
   
   #line {
       width:auto;
       height:15px;
       position: absolute;
       z-index: 1;
       top: 35px;
       float:right;
       padding:5px;
       background:#00ADEE;
   }
   
   #nav {
       position: absolute;
       top:120px;
       float: left;
   }
   
   #nav li {
       float: left;
       list-style: none;
       text-align:center;
      
   }
   
   #nav li a {
       color: #e3e3e3;
       z-index: 2;
       position: relative;
       cursor: pointer;
       float: left;
       font-size: 1em;
       font-family: helvetica, arial, sans-serif;
       text-decoration: none;
       padding: 15px 38.5px;
   }
   

This is the html markup;

1.     <ul id="nav">
         <li id="selected"><a href="index.html">Home</a></li>
           <li><a href="about.html">Services</a></li>
           <li><a href="#">Estate Agents</a></li>
           <li><a href="#">Press</a></li>
           <li><a href="#">About us</a></li>
           <li><a href="#">Careers</a></li>
           <li><a href="#">Contact us</a></li>
       </ul>
   

This is the Jquery;

1. (function($) {
   
       $.fn.spasticNav = function(options) {
      
           options = $.extend({
               overlap : 20,
               speed : 500,
               reset : 2000,
               color : 'none',
               easing : 'easeOutExpo'
           }, options);
      
           return this.each(function() {
          
                var nav = $(this),
                    currentPageItem = $('#selected', nav),
                    line,
                    reset;
                   
                $('<li a id="line"></li>').css({
                   width : currentPageItem.outerWidth(),
                    height : currentPageItem.outerHeight() + options.overlap,
                    left : currentPageItem.position().left,
                    top : currentPageItem.position().top - options.overlap / 2,
                    backgroundColor : options.color
                }).appendTo(this);
               
                line = $('#line', nav);
               
               $('li a:not(#line)', nav).hover(function() {
                   // mouse over
                   clearTimeout(reset);
                   line.animate(
                       {
                           left : $(this).position().left,
                           width : $(this).width()
                       },
                       {
                           duration : options.speed,
                           easing : options.easing,
                           queue : false
                       }
                   );
               }, function() {
                   // mouse out   
                   reset = setTimeout(function() {
                       line.animate({
                           width : currentPageItem.outerWidth(),
                           left : currentPageItem.position().left
                       }, options.speed)
                   }, options.reset);
      
               });
          
           }); // end each
      
       };
   
   })(jQuery);
   

Any help on this issue would be great thanks.

Hi.

I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got.

I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text.

I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code so you can see how its done please let me know.

This is the CSS;

1. ul, li {
       margin: 0;
       padding: 0;
   }
   
   #line {
       width:auto;
       height:15px;
       position: absolute;
       z-index: 1;
       top: 35px;
       float:right;
       padding:5px;
       background:#00ADEE;
   }
   
   #nav {
       position: absolute;
       top:120px;
       float: left;
   }
   
   #nav li {
       float: left;
       list-style: none;
       text-align:center;
      
   }
   
   #nav li a {
       color: #e3e3e3;
       z-index: 2;
       position: relative;
       cursor: pointer;
       float: left;
       font-size: 1em;
       font-family: helvetica, arial, sans-serif;
       text-decoration: none;
       padding: 15px 38.5px;
   }
   

This is the html markup;

1.     <ul id="nav">
         <li id="selected"><a href="index.html">Home</a></li>
           <li><a href="about.html">Services</a></li>
           <li><a href="#">Estate Agents</a></li>
           <li><a href="#">Press</a></li>
           <li><a href="#">About us</a></li>
           <li><a href="#">Careers</a></li>
           <li><a href="#">Contact us</a></li>
       </ul>
   

This is the Jquery;

1. (function($) {
   
       $.fn.spasticNav = function(options) {
      
           options = $.extend({
               overlap : 20,
               speed : 500,
               reset : 2000,
               color : 'none',
               easing : 'easeOutExpo'
           }, options);
      
           return this.each(function() {
          
                var nav = $(this),
                    currentPageItem = $('#selected', nav),
                    line,
                    reset;
                   
                $('<li a id="line"></li>').css({
                   width : currentPageItem.outerWidth(),
                    height : currentPageItem.outerHeight() + options.overlap,
                    left : currentPageItem.position().left,
                    top : currentPageItem.position().top - options.overlap / 2,
                    backgroundColor : options.color
                }).appendTo(this);
               
                line = $('#line', nav);
               
               $('li a:not(#line)', nav).hover(function() {
                   // mouse over
                   clearTimeout(reset);
                   line.animate(
                       {
                           left : $(this).position().left,
                           width : $(this).width()
                       },
                       {
                           duration : options.speed,
                           easing : options.easing,
                           queue : false
                       }
                   );
               }, function() {
                   // mouse out   
                   reset = setTimeout(function() {
                       line.animate({
                           width : currentPageItem.outerWidth(),
                           left : currentPageItem.position().left
                       }, options.speed)
                   }, options.reset);
      
               });
          
           }); // end each
      
       };
   
   })(jQuery);
   

Any help on this issue would be great thanks.

Hi.

My name is Mark.

I am trying to create a border effect on hover so when the use hovers over a link the css border changes color
to create some interactivity and also as a point of reference too.

Here is the code so far I just do not know how to implement the fade effect for the border to fade on hover;

Is there any way that I can simply change this code to work with it.

Any help would be great.
Thanks a bunch!

1. $(document).ready(function(){
   $(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2, .recentbotLeft").hover(function(){
   $(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2, .recentbotLeft").fadeTo("slow");
   $(this).css({"border-color":"#333333"});
   },function(){
   $(this).css({"border-color":"#cccccc"});
   });
   
   });

Hello my name is Mark Dunbavan.

I am fairly new to jquery and I have been developing a few bits for my website.

I am trying to create a tab at the side of my site that when moused over it creates a reveal so the rest of the tab
pops out from the side and then when clicked it opens the rest of the tab that will slide across the page above the content on which it is placed over.

Here is an example of what i mean. look for the tab that says 'tags' on the left.
http://www.formfiftyfive.com

I cannot seem to get mine to work or to even come to think about how to develop it within my code I
have already developed for it. Here is the code for the sliding bar.

1. <!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=ISO-8859-1" />
   <title>Mark Dunbavan Website</title>
   <link href="Main_Content.css" rel="stylesheet" type="text/css" />
   <link href="content.css" rel="stylesheet" type="text/css" />
   <link href="menu.css" rel="stylesheet" type="text/css" />
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
       <script src="jquery-1.4.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
     <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
   <script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
               <script type="text/javascript">
     $(document).ready(function() {
       $(".clickLink").click(function () {
         $("div1").toggle("slide", {}, 1000);
       });
   </script>
   </head>
   <body>
   <style type="text/css">
   div1 { display:none; width: 1500px; height: 80px; background: blue; position:fixed; top:500px; z-index:20; left:0px; }
   </style>
   <p><div align="left" class="clickLink"><img src="images/recentprojects.png"></div></p>
   <div1></div></body>
   </html>

Does anyone understand this code here. I understand it clearly but i am not sure where the tabs would come into this. The code works but I just cannot find out how I could work this idea into my code I have got now.

Any help would be amazing with this.

Thanks,

Mark