Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Links not clickable but link exists

    hi, whenever i hover over the images on my navigation bar, the links do appear to be there but when i click on them..it wont click :S



    this is the navigation, when you click on an item and i presume its that blue line with jquery that is causing it, maybe in the css...

    Html:

    Code:
      <ul class="lavaLampBottomStyle" id="3">
                    	<li class="navibg" style="width:80px;">
                            <a href="#">Home
                            	<br style="padding-bottom:5px;">
                                <span class="navidescription">
                                    welcome to cw
                                </span>
                            </a>
                        </li>
        
                    	<li class="navibg" style="width:110px;">
                            <a href="http://citywater.uk.com/contact-us/">Contact Us
                            	<br style="padding-bottom:5px;">
                                <span class="navidescription">
                                   how to reach us
                                </span>
                            </a>
                        </li>
    
                    	<li class="navibg" style="width:95px;">
                            <a href="http://citywater.uk.com/about-us/">About us
                            	<br style="padding-bottom:5px;">
                                <span class="navidescription">
                                   read about us
                                </span>
                            </a>
                        </li>
                        
                    	<li class="navibg">
                            <a href="http://citywater.uk.com/latest-news/">Latest News
                            	<br style="padding-bottom:5px;">
                                <span class="navidescription">
                                   water treatment news
                                </span>
                            </a>
                        </li>          
                    </ul>
    CSS:
    Code:
    .lavaLampBottomStyle {
      float :right;
      list-style :none;
      margin-top :20px;
      padding :0;
      margin-bottom:24px;
    }
    
      .lavaLampBottomStyle li {
      border-bottom : 5px solid white;
      float : left;
      list-style : none;
      padding-bottom :30px;
      padding-left :25px;
      padding-top :10px;
      position :relative;
      vertical-align :top;
    }
    
      .lavaLampBottomStyle li.back {
      border-bottom : 5px solid #88B8E8;
      height : 1px;
      position : absolute;
      margin-top:39px;
      width : 9px;
      z-index : 8;
    }
    
      .lavaLampBottomStyle li a {
      color : white;
      float : left;
      font : bold 15px arial;
      height : 40px;
      letter-spacing : 0;
      outline : none;
      padding-right :5px;
      position : relative;
      text-align : center;
      text-decoration : none;
      text-transform : uppercase;
      top : 7px;
      z-index :10;
    }
    
       .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
      border : none;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Have you got it sorted? Or can we have a link to your page?
    Last edited by abduraooft; 08-04-2011 at 08:42 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    It is working here in my browsers

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its on a localhost and no its not sorted yet...

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Guru101011 View Post
    its on a localhost and no its not sorted yet...

    Try to test in FF or IE

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    not working with IE, chrome, firefox

    some CSS was covered with link

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    here on my OC... in FF5 ... its fine and in IE too....

    Try 2 clear browser history and try.. else... create a new HTML with diff name and copy all code there....

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do you think its cause of the javascript??

    lavalamp.js
    Code:
    (function($) {
    $.fn.lavaLamp = function(o) {
        o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
    
        return this.each(function() {
            var me = $(this), noop = function(){},
                $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
                $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
    
            $li.not(".back").hover(function() {
                move(this);
            }, noop);
    
            $(this).hover(noop, function() {
                move(curr);
            });
    
            $li.click(function(e) {
                setCurr(this);
                return o.click.apply(this, [e, this]);
            });
    
            setCurr(curr);
    
            function setCurr(el) {
                $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
                curr = el;
            };
    
            function move(el) {
                $back.each(function() {
                    $(this).dequeue(); }
                ).animate({
                    width: el.offsetWidth,
                    left: el.offsetLeft
                }, o.speed, o.fx);
            };
    
        });
    };
    })(jQuery);

    lavalamp-min.js
    Code:
    (function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try if it is working without Js... if it will work, then It can be issue of js

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi website is live now

    http://citywater.uk.com/

    I did disable javascript and it worked perfectly, however i got the same effect going at the bottom! that is working perfectly but the top is not working

    help

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    for top you can write your custom jquery


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •