Trying to place bullets of the nivo slider on the image

Trying to place bullets of the nivo slider on the image - javascript

I'm working on a Nivo Slider for my website, and I'm facing a problem with the bullets of the slider. I want them on the images of the slider. Now they are on my menu.
Like this:
This is the nivo-slider.css file:
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
position: relative;
z-index:1000;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
And this is default.css
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
/*-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;*/
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
I'd really appreciate your help.
Thanks in advance.

It's hard to actually give you a working example from the code you provided above, but I went to Nivo Slider's page and played with one of their demos in the console. What you can do is change this:
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
to
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
position: absolute;
top: 800px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
left: 200px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
z-index: 5; /*MAKE THIS HIGHER IF THE BUTTONS ARE NOT ON TOP OF THE IMAGE IN YOUR
EXAMPLE, THIS WAS ENOUGH ON NIVO'S SITE*/
}

Related

set div to position fixed on the relative location

Is it possible to make a div fixed on the location where it is drawn (it's standard 'static/relative' location)?
So I want div .one, .three and .four to be fixed in the location where it is drawn initially. So that it doesn't scroll. https://jsfiddle.net/sor8hntk/2/

Yes! https://jsfiddle.net/sor8hntk/7/
body {
margin-top:40px;
}
.one {
float:left;
background-color:green;
width:33%;
height:50px;
position: fixed;
}
.two {
float:left;
background-color:red;
width:33%;
height:500px;
left: 33%;
position: absolute;
}
.three {
float:left;
background-color:blue;
width:33%;
height:50px;
position: fixed;
left: 66%;
}
.four {
width:33%;
background-color:purple;
height:10px;
position: fixed;
}
.five {
width:100%;
background-color:pink;
margin-top: 10px;
}
.six {
width:100%;
height:10px;
background-color:yellow;
}

Displaying a tree list using CSS or JS with dots on end of lines

I want to display something like this on a HTML page using CSS:
I currently use this code:
.tree,
.tree ul {
margin:0 0 0 1em; /* indentation */
padding:0;
list-style:none;
color:#1f1f1f;
position:relative;
}
.tree ul {margin-left:.5em}
.tree:before,
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
.tree li {
margin:0;
padding:0 1.5em; /* indentation + .5em */
line-height:2em; /* default list item's `line-height` */
font-weight:bold;
position:relative;
}
.tree li:before {
content:"";
display:block;
width:10px; /* same with indentation */
height:0;
border-top:1px solid;
margin-top:-1px; /* border top width */
position:absolute;
top:1em; /* (line-height/2) */
left:0;
}
.tree li:last-child:before {
background:#fff; /* same with body background */
height:auto;
top:1em; /* (line-height/2) */
bottom:0;
}
<ul class="tree">
<li>Bad Credit/No Credit</li>
<li>Bankruptcy</li>
<li>Repossession</li>
<li>Consumer Proposal</li>
</ul>
How can I do that and is possible?

You can use :after pseudo-elements to hold the dots:
.tree li:after {
content: "\2022"; /* bullet code */
position: absolute;
left: 9px;
top: -1px;
}
.tree:after {
content: "\2022"; /* bullet code */
position: absolute;
left: -3px;
top: -8px;
}
.tree,
.tree ul {
margin:0 0 0 1em; /* indentation */
padding:0;
list-style:none;
color:#1f1f1f;
position:relative;
}
.tree ul {margin-left:.5em}
.tree:before,
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
.tree li {
margin:0;
padding:0 1.5em; /* indentation + .5em */
line-height:2em; /* default list item's `line-height` */
font-weight:bold;
position:relative;
}
.tree li:before {
content:"";
display:block;
width:10px; /* same with indentation */
height:0;
border-top:1px solid;
margin-top:-1px; /* border top width */
position:absolute;
top:1em; /* (line-height/2) */
left:0;
}
.tree li:last-child:before {
background:#fff; /* same with body background */
height:auto;
top:1em; /* (line-height/2) */
bottom:0;
}
.tree li:after {
content: "\2022"; /* bullet */
position: absolute;
left: 9px;
top: -1px;
}
.tree:after {
content: "\2022"; /* bullet */
position: absolute;
left: -3px;
top: -8px;
}
<ul class="tree">
<li>Bad Credit/No Credit</li>
<li>Bankruptcy</li>
<li>Repossession</li>
<li>Consumer Proposal</li>
</ul>

Weird behavior of CSS (elements are rotated for 180%)

I have a problem with CSS. I am creating memory game. Problem is that all elements are rotated for 180%. I don't know reason for this...
Here is jsFiddle of game (and problem)
http://jsfiddle.net/uM639/
Here is code that is displaying cards that are rotated:
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
#boxcard > div:nth-child(6n+1) {
clear: both;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
float:left;
/*display: inline-block;
position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
position:absolute;
}

I believe the problem (at least why it's happening in Firefox 20.0) is that not all of your CSS3 transforms are the same. If you looks closely at your .back and .flipped styles, the value for transform (not any of the vendor-prefixed versions) is actually wrong. Where is should be rotateY(), it is instead solely rotate():
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg); /* This seems wrong... */
}
To fix this, just add in the missing Y to that line for both class style definitions:
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg); /* Fixed! */
}
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg); /* Fixed! */
z-index:3;
position:absolute;
}
Here's an updated JSFiddle with the fix. It seems to correct the problem (at least in Firefox 20.0), and still works fine in Google Chrome (so it didn't break anything unexpectedly).
Hope this helps! Let me know if you have any questions.

You must replace the lines where it says 180deg to 0deg like so:
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
/*background: #CCC;*/
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
#boxcard > div:nth-child(6n+1) {
clear: both;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
float:left;
/*display: inline-block;
position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotate(0deg);
z-index:3;
position:absolute;
}
#boxbuttons {
text-align: center;
/* margin: 20px;*/
display: block;
height: 240px;
margin-bottom:50px;
top:0;
left: 0;
right: 0;
background-image:url('http://remake.hr/puzzle/images/header6blue.jpg');
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
#info {
text-align: center;
/* margin: 20px;*/
display: block;
/*height: 500px;*/
left: 0;
right: 0;
color:black;
}
.botun {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
/*margin: 5px;*/
border-radius: 10px;
cursor: pointer;
width: 20%;
text-align: center;
margin:0 auto;
}

.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
position:absolute;
}
you define here you want the images to be flipped. the class 'back' is added to the divs with the image...

Adding facebook like button to jQuery colorbox in UberGallery

I'm using UberGallery and am trying to add facebook like button to jQuery colorbox. As far as I get is here:
(You can see the top of fb plugin)
Then if I press ctrl+f, write test(as I made <div id="extra-info">test</div>) and press enter I get normal view as I want to:
Question is: What do I need to change in css to make colorbox stretch at the beggining (on colorbox OnComplete function)?
colorbox.css (it's UberGallerys default one(nothing changed))
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
colorboxScripts.php (changed a little bit)
<script type="text/javascript" src="<?php echo $path; ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5",
onComplete: function() {
$("#cboxContent").append('<div id="extra-info">test<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=673146712707892" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe></div>');
}
});
});
</script>
style.css (changed a little bit)
/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html {
background-color: #222;
font-size: 100%;
}
body {
color: #333;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: .8em;
}
#galleryWrapper {
background-color: #FFF;
margin: 20px auto;
padding: 3px;
width: 1000px;
}
h1 {
background-color: #000;
color: #FFF;
font-size: 1.6em;
font-weight: bold;
margin: 0 0 3px;
padding: 8px;
}
#galleryListWrapper {
/* NULL */
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryList {
margin: 0;
padding: 0 4px;
}
#galleryList li {
display: inline-block;
float: left;
list-style: none;
margin: 5px 5px;
padding: 0;
}
#galleryList li a {
background-color: #000;
border: 4px solid #DDD;
display: block;
padding: 1px;
}
#galleryList li a:hover {
border-color: #DA8600;
}
#galleryList li a img {
border: none;
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY FOOTER |--------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryFooter {
background-color: #000;
color: #999;
margin-top: 3px;
padding: 8px;
}
#credit {
float: right;
font-size: .95em;
margin: 4px 0;
}
#galleryFooter #credit a {
color: #999;
}
#galleryFooter #credit a:hover {
color: #DA8600;
}
/* ---------------------------------------- */
/* ----| PAGINATION |-------------------- */
/* ---------------------------------------- */
#galleryPagination {
color: #FFF;
float: left;
font-size: .95em;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#galleryPagination li {
border: 1px solid transparent;
display: block;
float: left;
list-style: none;
margin-right: 1px;
}
#galleryPagination li:hover {
background-color: #FFF;
}
#galleryPagination li.title {
background: transparent url(../../page_white_stack.png) no-repeat left center;
border: 1px solid transparent;
font-weight: normal;
padding: 3px 6px 3px 22px;
}
#galleryPagination li a, #galleryPagination li a:visited {
color: #FFF;
display: block;
padding: 3px 6px;
text-decoration: none;
}
#galleryPagination li:hover a {
color: #000;
}
#galleryPagination li.current {
background-color: #DA8600;
color: #000;
font-weight: bold;
padding: 3px 6px;
}
#galleryPagination li.inactive {
background-color: transparent;
color: #999;
border: 1px solid transparent;
display: block;
padding: 3px 6px;
}
/* ---------------------------------------- */
/* ----| SYSTEM MESSAGES |--------------- */
/* ---------------------------------------- */
#systemMessages {
margin: 0;
}
#systemMessages li {
background-color: #DDD;
color: #000;
line-height: 1.4em;
list-style: none;
margin-bottom: 6px;
padding: 5px;
text-align: center;
text-shadow: none;
}
#systemMessages li.notice {
background-color: #DDD;
color: #FFF;
}
#systemMessages li.success {
background-color: #070;
color: #FFF;
}
#systemMessages li.error {
background-color: #DA8600;
}
/* ---------------------------------------- */
/* ----| MISCELLANEOUS |----------------- */
/* ---------------------------------------- */
#errorMessage {
background-color: #FFF;
display: block;
line-height: 1.4em;
margin: 20px;
padding: 20px;
text-align: center;
}
#cboxWrapper {
text-shadow: none !important;
}
#cboxCurrent {
display: none !important;
}
#cboxTitle {
font-size: 1em !important;
}
#extra-info {
position: relative; display: inline-block; bottom:4px; left:0; text-align:center; width:100%; color:#949494;
}
P. S. Yes I have read and tried these threads:
Adding div below images in colorbox
Facebook like button and colorbox

transition between HTML Pages using jQuery?

I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
#media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
#media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
#media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
#keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
#-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>

I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.

Develop Reference

JavaScript is the programming language of the Web.

Trying to place bullets of the nivo slider on the image - javascript

Related

set div to position fixed on the relative location

Displaying a tree list using CSS or JS with dots on end of lines

Weird behavior of CSS (elements are rotated for 180%)

Adding facebook like button to jQuery colorbox in UberGallery

transition between HTML Pages using jQuery?

Categories

Resources