I need to show image slide show for news which can have one or more than one image displayed.
If it has just one image then Navigation bar should hide, This feature is built in.
But i am facing problem with moving the caption of the image exactly under the Image. I am able to change the bottom margin for css p.bjqs-caption to -30px. which moves the caption but hides under something and is not visible i tried all options like z-index and other stuff but nothing seem to work.
I would appreciate help in this regard.
Slider : http://www.basic-slider.com/
I tried to setup fiddle but demo on fiddle is not working link http://jsfiddle.net/rUXAt/1/
UPDATE : Working fiddle http://jsfiddle.net/rUXAt/2/
Check working fiddle
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
http://jsfiddle.net/rUXAt/2/
try this one,
put height for ul and li height: 355px !important; and color to p.bjqs-caption
p.bjqs-caption {
background: none repeat scroll 0 0 #CCCCCC;
}
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
ul.bjqs {
display: none;
height: 355px !important;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
li.bjqs-slide {
display: none;
height: 355px !important;
position: absolute;
}
Related
I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
I am experiencing an issue when I start scrolling down and reach the point when the sticky nav becomes visible, it seems to create a duplicate of the background from header and makes header jump, but it is supposed to move to the next section. Is it CSS or JS related issue?
Please see entire included code:
https://codepen.io/pipistrellonetopier/pen/yXLGjo
CSS code
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
z-index: 9999;
}
.sticky .main-nav { margin-top: 22px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 14px 0;
color: #f0f0f0;
font-size: 100%;
}
.sticky .logo {
display: block;
height: 29px;
margin: 15px 0;
}
Thank you
Peter
Give the following hyperlink display:inline-block and it will stop jumping:
<img src="resources/css/img/app-store-btn.svg" alt="App Store Button">
I am having trouble with getting a particular jQuery library (Windy Slider) to auto-size. I have uploaded the code into CodePen which can be found here http://codepen.io/zyoung0206/pen/rLmXbV
The problem I am having is that, when you click the wireframe & mockups blue circle button, a window should popup with a image slider inside it. These container codes are:
.windy-demo {
/*width: 1024px;*/
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
/* width: 1044px;
height: 788px;*/
width: 60%;
height: 80%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
which can be found on top of the CSS portion of the CodePen.
What I am accomplish is to make these containers 60% width of the screen, and if the image inside is too big (let's say, the container is 800px width but image is 1024px), then the image to resize to fit inside the container.
I have tried manually setting the width of the containers (which resulted in fixed pixels of window size) and then tried setting it as width: 60%, but it is not working out well for the images that are larger than the container.
I think img { width: 100%; height: auto; } will do it. I have just played around with your fiddle and as far as I can see, this should work.
I have just updated my answer, these are the first lines of CSS that worked for me, rebuilding your example locally:
.windy-demo {
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
padding: 0;
margin: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.windy-demo ul.wi-container li {
display: block; /* Make list items to block in order to stretch 100% */
overflow-y: hidden; /* Hides the scroll bar y-axis */
}
.windy-demo ul.wi-container li img {
width: 100%; /* makes the image fit 100% of available space */
height: auto;
}
.windy-demo h4 {
padding: 0 10px;
line-height: 26px;
margin: 0;
}
.windy-demo ul.wi-container li {
padding: 0;
border: 10px solid #fff;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#slider ......
I'm having a small problem with some text jumping around in my sticky menu. This is my code: http://jsfiddle.net/u6ywraj8/
As you can see, I want the red #menu to stick to the top when a user scrolls down. However, the text in the top left part of the menu jumps around. I want this text to always be in the top left part of the red menu, I don't want it to have the initial ~100px padding.
Thank you for your help!
Try this one
sticknav {
background: none repeat scroll 0 0 #ffffff;
display: inline-block;
height: 30px;
left: 0;
margin-left: 0;
margin-right: 0;
position: relative;
right: 0;
width: 100%;
z-index: 9999;
}
Add float: left; to this class sticknav{}
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
float: left;
}
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )