jquery - Issue with P tag content covering a block level link -
i've been going insane j-query slider adapted juliendecaudin's barousel plugin
i've put on jsfiddle:
the 4 navigation blocks created jquery code (which why i'm having problem). because needed text on each blocks, added p tags code , positioned them on each block. meant covered links, , consequently hover effects stop.
i have tried multiple things thought make work limited jquery knowledge have (when hover on p tag, show relevant background image @ correct width , height , positioned, instance) none have worked!
what love know how make text act link navigation blocks, also, make when hover on text, background image hovers too. alternatively if there's way fuse 2 swell!
the html bit added p-tags here (the jquery code automatically creates html ul li elements:
<div class="barousel_nav"> <p class="abs abs1">value proposition development</p> <p class="abs abs2">sales engagement</p> <p class="abs abs3">customer communications</p> <p class="abs abs4">insight-driven lead generation campaigns</p> </div> if specifiy each nav ul li link should able create workaround, stands each li has nothing specific it!
you can change bits put work you'd expect:
on jquery.barousel.js file, snippet:
//build navigation if (settings.navtype == 1) { //items navigation type var strnavlist = "<ul>"; and change it, adding class (navigationmenu) ul:
//build navigation if (settings.navtype == 1) { //items navigation type var strnavlist = "<ul class='navigationmenu'>"; on page header, after load libraries, add snippet below:
<script type="text/javascript"> $(function () { // spans contains class abs, , move them // li accordingly. $("span.abs").each(function (index, element) { var target = $("ul.navigationmenu li")[index]; $(this).appendto($(target).find("a")); }); }); </script> change css, removing unused rules:
.barousel { height:408px; margin-bottom:85px; position:relative; width:750px; } .barousel_wrap { float:right; height:408px; width:650px; } .barousel_image { background-image:url(http://oliverbanham.com/quantumsite/images/slider/images/bggraygradient.jpg); background-position:initial initial; background-repeat:repeat no-repeat; height:306px; padding-left:10px; width:660px; } .barousel_image img { display:none; position:absolute; } .barousel_image img.default { display:block; } .barousel_image img.current { z-index:10; } .barousel_content { background-color:#6d4682; background-image:url(http://oliverbanham.com/quantumsite/images/slider/images/largegrad_05.jpg); background-position:initial initial; background-repeat:repeat no-repeat; display:block; height:auto; margin:0; padding:5px 10px 0; width:650px; } .barousel_content div { display:none; margin-bottom:7px; width:650px; } .barousel_content div.default { display:block; height:auto; padding-bottom:7px !important; } .barousel_content p { color:white; font-size:12px; font-weight:normal; line-height:16px; margin-bottom:8px !important; top:0; z-index:50; } .barousel_content p.sliderh { font-weight:bold; margin-bottom:5px; } .barousel_nav { float:left; height:408px; width:100px; z-index:20; } /*.barousel_nav p.abs { cursor:pointer; display:inline-block; font-size:11px; left:5px; margin:0 auto; position:absolute; text-align:center; width:90px; } .barousel_nav p.abs1 { top:35px; } .barousel_nav p.abs2 { top:135px; } .barousel_nav p.abs3 { bottom:140px; } .barousel_nav p.abs4 { bottom:25px; left:5px; }*/ .barousel_nav ul { float:right; margin:0; padding:0; } .barousel_nav li { float:left; /*font-size:0; line-height:0;*/ list-style:none; padding-left:3px; } .barousel_nav li { background-image:url(http://oliverbanham.com/quantumsite/images/slider/images/btn_01.jpg); display:block; /*font-size:0;*/ height:102px; /*line-height:0;*/ text-decoration:none; width:100px; } .barousel_nav li a:hover { background-image:url(http://oliverbanham.com/quantumsite/images/slider/images/current_btn_01.jpg); } .barousel_nav li a.current { background-image:url(http://oliverbanham.com/quantumsite/images/slider/images/current_btn_01.jpg); } and finally, change html:
<span class="abs">value proposition development</span> <span class="abs">sales engagement</span> <span class="abs">customer communications</span> <span class="abs">insight-driven lead generation campaigns</span> working demo: http://jsfiddle.net/psfms/2/
of course there css tweaks done , make nicer, essential here.
Comments
Post a Comment