Javascript Notification Bar - Make it appear only once per day? - javascript

I've got a notification bar on the bottom of my blog that I'd like to appear only once a day. How would I write a cookie for that? Here's the code to the script:
<style type='text/css'>
#ut-sticky
{
background:url('http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png') repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:64px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:18px; text-align:center; width:95%; float:left;}
#ut-sticky p a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1; line-height:30px;}
</style>
<div id='ut-sticky'>
<p><a href='http://bit.ly/yq10RE' target='_blank'>Use Google Reader? Why not add www.BenjerMcVeigh.com to your Google Reader list?</a>     <a href='http://bit.ly/yq10RE' target='_blank'><img alt='Add to Google' border='0' src='http://gmodules.com/ig/images/plus_google.gif'/></a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
Thanks!

wouldn't just setting the expiry to tomorrow # 12am do the job?

Related

Whole page pop up message to be activated in line with alert

I have a website where it is able to successfully detect whether you are using Chrome as your browser and it works perfectly.
The coding for this "element" is -
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome){
alert("Chrome is detected");
}
The other element is a transparent whole page pop up message. This also works perfectly when using a HTML button to activate the message. But I need the pop up to be activated in Javascript not on a button click, I want it activated, in the line alert("Chrome is detected"); up above. The coding for this element is below and you will see what I mean...
<!DOCTYPE html>
<head>
<style>
.button{ width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none;
}
#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none;
}
#loginScreen{ height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background-color: white; no-repeat; border:5px solid #cccccc; border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2;
}
.cancel{ display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:32px; width:32px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; border-radius:36px;
}
</style>
</head>
<body>
<div id="top" align="center">
<!-- PLEASE DIRECT YOUR ATTENTION TO THE LINE BELOW -->
Click here to Log In <!-- THIS IS HOW THE POP UP IS ACTIVATED BUT I NEED TO ACHIEVE THIS LINE IN JAVASCRIPT -->
</div>
<div id="loginScreen">
<span style="font-size:30px">Attention User!</span>
×
</div>
<div id="cover" ></div>
</body>
</html>
Any help would be appreciated!
If you wants to open your popup when detected func if true, change your code like this :
if(isChrome){
// alert("Chrome is detected");
$("#exitbutton").trigger('click'); //
}
I dont think you will able to trigger click on an anchor tag with href.
You can use window.location.href
if(isChrome){
var href = $('#thebutton').attr('href');
window.location.href = href;
//alert("Chrome is detected");
}
JSFIDDLE

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.
(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>
First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button
Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

I made a jquery slide show but it doesn't work right, what do i do [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg
Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.

Want to arrange css divs in a proper way

Please, Please answer / help me.
I have three divs with CSS and it is generated dynamically.
And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.
properties of divs
<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>
<!-- smalldiv -->
<div id="smalldiv" style="
width: 420px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border: 1px solid #BFBFBF;
float: right;
clear: right;"> </div>
<!-- largediv -->
<div id="largediv" style="
width: 408px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0px 1px 1px #CCC;
border: 1px solid #BFBFBF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;">
As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet
Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)
As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise
Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.
In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div
a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.
Here's an option that requires JavaScript:
$(document).ready(function(){
var containerTop = $('.container')[0].offsetTop,
lpos = containerTop,
rpos = containerTop;
$('.container > div').each(function(){
var $el = $(this),
el = $el[0];
if($el.hasClass('large')){
if(lpos < el.offsetTop){
$el.css('margin-top', (lpos - el.offsetTop) + "px");
}
lpos += $el.height();
}else if($el.hasClass('small')){
if(rpos < el.offsetTop){
$el.css('margin-top', (rpos - el.offsetTop) + "px");
}
rpos += $el.height();
}
});
});
.container{
}
.container > div{
width:50%;
box-sizing:border-box;
position:relative;
}
.container .large{
height:400px;
display:inline-block;
float:left;
clear:left;
position:relative;
}
.container .small{
height:150px;
display:inline-block;
float:right;
clear:right;
position:relative;
}
.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='large red'></div>
<div class='small blue'></div>
<div class='small green'></div>
<div class='large yellow'></div>
<div class='small purple'></div>
<div class='small orange'></div>
</div>
note: I think it would be better to use a div for your "wincontainer" than an ordered list.
I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.
Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.
You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.
Your css and html worked really.
See the fiddle
http://jsfiddle.net/jwy3c3n5/2/
<div id="container">
<div id="leftwrapper">
<div class="large">test<br />test<br />test<br />test<br />test<br /></div>
<div class="large">testtest<br />test<br />test<br />test<br /></div>
</div>
<div id="rightwrapper">
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
</div>
</div>
#container {
width: 500px
}
#rightwrapper {
float: right;
width: 35%;
}
#leftwrapper {
float: left;
width: 55%;
}
.large {
background: gray;
margin-bottom:10px;
}
.small{
background: gray;
margin-bottom:10px;
}
I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.
Here is the example: http://jsfiddle.net/uaeb0Lmv/
I revised the margins as such:
#largediv {
margin: 10px 30px 30px;
}
For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.
I understand your problem and i try to solve your problems. You can use this code. It is working.
Live Working Demo
HTML Code
<div id="main">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
CSS Code:
#main
{
height:410px;
width:450px;
border:5px solid black;
}
#one
{
height:150px;
width:150px;
background-color:red;
border:5px solid black;
position:relative;
margin-left:20px;
margin-top:20px;
}
#two
{
height:150px;
width:150px;
background-color:green;
border:5px solid black;
margin-top:20px;
position:relative;
float:left;
margin-left:20px;
margin-top:20px;
}
#three
{
height:60px;
width:200px;
background-color:blue;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-160px;
}
#four
{
height:60px;
width:200px;
background-color:gold;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-60px;
}
#five
{
height:60px;
width:200px;
background-color:purple;
border:5px solid black;
position:relative;
float:left;
display:table-cell;
margin-top:40px;
margin-left:-210px;
}
#six
{
height:60px;
width:200px;
background-color:gray;
border:5px solid black;
margin-left:-210px;
margin-top:140px;
position:relative;
float:left;
display:table-cell;
}
Result:

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck

Categories