Response title
This is preview!
Hi All,
I also have a problem with kwicks on the main page. They don't slide open, just stay closed. As Im not familiar with this and I can't find a solution on the internet, can anyone help me please?
HTML FILE
____________________________________
<div class="main-bg"> <div class="main"> <!-- content --> <section id="content"> <div class="main-2 ident-bot-11"> <div class="wrapper ident-bot-3"> <div class="fl-l ident-right-2"> <ul class="kwicks horizontal" > <li id="kwick_1"> <div class="kwick-box-1"> <div class="kwick-bg-1"> <div class="fl-l"> <p class="kwick-slogan-1">hope</p> <p class="kwick-slogan-2">for peace</p> </div> <a href="#">more info</a> <div class="clear"></div> </div> </div> <li id="kwick_2"> <div class="kwick-box-1"> <div class="kwick-bg-2"> <div class="fl-l"> <p class="kwick-slogan-1">save</p> <p class="kwick-slogan-2">the earth</p> </div> <a href="#">more info</a> <div class="clear"></div> </div> </div> <li id="kwick_3"> <div class="kwick-box-1"> <div class="kwick-bg-3"> <div class="fl-l"> <p class="kwick-slogan-1">help</p> <p class="kwick-slogan-2">those in need</p> </div> <a href="#">more info</a> <div class="clear"></div> </div> </div> </div>
CSS FILE
________________________________
.kwicks { /* recommended styles for kwicks ul container */ list-style: none; position: relative; margin-top: 20px; padding: 0; } .kwicks li{ /* these are required, but the values are up to you (must be pixel) */ width: 209px; height: 515px; /*do not change these */ display: block; overflow: hidden; padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */ } .kwicks.horizontal li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ float: left; border-left: 1px solid #fff; } .kwicks.horizontal li:first-child { border-left: none; } #kwick_1 { background: url('../images/kwick-slide-1.png') no-repeat; } #kwick_2 { background: url('../images/kwick-slide-2.png') no-repeat; } #kwick_3 { background: url('../images/kwick-slide-3.png') no-repeat; } .kwick-box-1 { position:absolute; left:0; bottom: 0; width: 629px; color:#fafafa; text-transform: uppercase; } .kwick-bg-1 { background: #ff5241; padding: 16px 0 27px 0; } .kwick-bg-2 { background: #ededeb; padding: 16px 0 27px 0; } .kwick-bg-3 { background: url('../images/main-bg.jpg'); padding: 16px 0 27px 0; } .kwick-slogan-1 { font: 70px/84px 'Francois One', sans-serif; letter-spacing: -1px; padding-left: 19px; } .kwick-slogan-2 { font: 23px/28px 'Oswald', sans-serif; letter-spacing: -1px; margin-top: -15px; padding-left: 23px; } .kwiks-button { font: 25px/56px 'Francois One', sans-serif; color:#fff; text-transform: uppercase; letter-spacing: -1px; padding: 0 20px; background: url('../images/kwiks-button.png'); margin-top: 26px; margin-right:39px; } .kwiks-button:hover { color:#504257; }
I also have additional javascript files, just let me know if you also need to check out these ones. Thanks a lot!
© 2013 jQuery Foundation
Sponsored by and others.