jquery - Maximage plugin Position:absolute -


i'm using maximage jquery plugin create fullscreen slideshow. plugin allows include html elements layered on top of background image. use html provide caption each image , have caption layered on top of site footer (separate maximage). have tried various positioning cannot find way this, caption behind footer due order of elements. have idea how might this? code follows after has been rendered maximage plugin -

<div role="main"> <img id="cycle-loader" src="img/ajax-loader.gif" style="display: none;"> <div id="maximage" class="mc-cycle" style="width: 1282px; height: 294px; overflow: hidden; display: block;"> <div class="mc-image " data-href="" style="background-image: url("img/showcase/1-redmire.jpg"); position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 1282px; height: 294px;" title=""> <div class="slide-caption"> <p>bespoke house in mercaston, derbyshire. image produced client issue.</p> </div> </div> </div> </div> <footer> <a id="arrow_left" href=""></a> <a id="arrow_right" href=""></a> <div id="controls"></div> </footer>

and css -

footer { bottom: 0px; position: fixed; width: 100%; background: url(../img/bg-black.png) repeat; color: #fff; height: 55px; line-height: 55px; border-bottom: 1px solid #333; } .slide-caption { position: fixed; z-index: 998; bottom: 20px; left: 20px; color: #ffffff; background: #000000; padding: 5px; }

your problem seems 1 general html style limitations. general rule when working z-indexes z-index elements on same level in document tree: in example, z-indexing div[role="main"] , z-indexing <footer>. modern browsers can accomplished block level elements, inconsistent if trying accurately fallback older browsers or positioning elements absolutely (this why henrik unable replicate issue). not know of way slide foreign element in between absolutely positioned parent , child element... if does, please let me know.

the easiest solution can see pull caption out , write dynamically footer jquery. can done cycle's before() , after() animation callbacks (http://jquery.malsup.com/cycle/options.html).

i have dummied example in jsfiddle: http://jsfiddle.net/edr4v/1/

hopefully helps.


Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more