I am using the slider http://marktyrrell.com/labs/blueberry/ and am trying to add description boxes that overlay the images and change with each div. I added a div class, but it is not showing up. Not sure if I also need to alter javascript?
css
.blueberry {
margin: 0 auto;
max-width:1280px;
position:relative;
z-index:1;
margin-top:-25px;
}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
margin:0;
padding:0;
list-style:none;
}
.blueberry .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }
.slides .description {
z-index:100;
position:absolute;
left: 0px;
background:#000;
color:#1d1d1d;
}
HTML
<div class="blueberry shadow">
<ul class="slides">
<li><img src="images/slide1.jpg" />
<div class="description">
<p>Kick off 2013 by starting a fundraising campaign to help people get access to clean water. It’s fun, it’s easy and it’s the best way we can think to start the new year.</p></div></li>
js
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
Thanks for any help in advance
You need to define css top property, see it works fine:
Note: Using div or p inside ul li is agaisnt to the web standarts. I suggest to use tags like span, em, s, i.
Related
I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.
The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.
This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.
https://jsfiddle.net/k6ey1duc/36/
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.text {
display: inline;
}
.pop-up {
display: none;
background-color: #fe0c0d;
}
#show-hide {
display: block;
margin: auto;
}
<body>
<script>
$(document).ready(function() {
var x = false;
$('#show-hide').on('click', function() {
if (!x) {
$("#pop-up").css({
"backgroundColor": "#fe0c0d",
"display": "inline"
});
x = true;
} else {
$("#pop-up").hide();
x = false;
}
});
});
</script>
<div class='container'>
<p class='text'>
Hello there! <span>Here is a span.</span>
</p>
<div id='pop-up' class='pop-up'>
Here is a pop-up
</div>
<button id='show-hide'>
Click for pop up
</button>
</div>
</body>
Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.
Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.
.container {
position: relative;
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.pop-up {
position: absolute;
display: none;
background-color: #fe0c0d;
}
Use position:relative and postion:absolute.
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px;
position: relative;
}
.pop-up {
display: none;
background-color: #fe0c0d;
position: absolute;
left:100%;
width:inherit;
}
Could you please tell me how to show big or large image on button click with overlay. I am making a image slider in which user click on image and it shows the full image with overlay. I tried like this
https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:black;
z-index:9999;
color:white;
}
$(function() {
var counter = 0;
$('#next').click(function() {
if (counter < $('.imageBlock').length-1) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('.imageBlock').click(function(){
$('body html').addClass('overlay')
})
})
Here's an example where clicking the image - we take the src, and add it to a hidden div (.overlay img) and then show the div.
clicking the overlay hides it again.
Hope this is helpful
$('.thumb').on('click', function(){
$('.overlay img').attr('src', $(this).attr('src'));
$('.overlay').show();
});
$('.overlay').on('click', function(){
$('.overlay').hide();
});
.thumb {
width: 250px;
}
.overlay {
display: none;
position: absolute;
top:0px;
background: #000;
width: 100%;
height: 100vh;
white-space: nowrap;
text-align: center;
}
.overlay img {
width: 100%;
border:5px solid #000;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=">
<div class="overlay"><span class="helper"></span><img src=""></div>
Here's a fiddle: https://jsfiddle.net/BradChelly/kbode1cx/
For starters $('body html').addClass('overlay') doesn't work, because that selects an html element inside a body element.. which doesn't exist.
I think you meant to target either class (to make it cross-browser):
$('body,html')
You could toggle the class:
$('body,html').toggleClass('overlay')
Then adjust your css. Probably something like this:
.overlay .imageBlock .small img {
display: none;
}
.overlay .imageBlock .large img {
display: block;
}
BTW, if you only need the .small and .large wrappers with img just for the overlay feature, then you're making things harder than needed...
If you want to use a library, you can use prettyPhoto that does everything you need.
If you don't want to use a library, you can do that in your code (last jQuery event of your JS file) :
$('.imageBlock').click(function(){
$('body').toggleClass('overlay');
$('.imageBlock').eq(counter).find('.large img').toggle();
})
I have this very simple code, the problem is it doesn't give the same output using Firefox and IE: in Firefox, the images are superposed but right-aligned, and in IE they are superposed and left aligned.
What I want is that the images will be centered and superposed.
I have to create images using Javascript to use a special library in creating the images.
Thank you for your help.
HTML
<body>
<div id="Container">
<script type="text/javascript">
document.write('<img id="image1" src="image1.jpg">')
document.write('<img id="image1" src="image2.jpg">')
</script>
</div>
</body>
CSS
body {
text-align: center;
background-color: #e8e6e7;
margin-left: auto;
margin-right: auto;
}
#Container {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image1 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
#image2 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
Since you are making #image1 and #image2 be absolutely positionined, they will not adjust the width/height of the #Container. This means you can't center it, because it doesn't have the proportions to center.
The code below makes only one image be absolutely positioned. This lets your other image act as expected. You can do whatever you want with the "overlay" image.
I also included z-index, which can let you change the order of the images. This isn't necessary for this example, but if you add more images, it may be useful.
HTML
<div id="Container">
<div class="image-wrap">
<img id="image1" src="http://dummyimage.com/200x200/fa00fa/fff.png"/>
<img id="image2" src="http://dummyimage.com/200x200/00ff33/000000.png"/>
</div>
</div>
CSS
#Container .image-wrap {
position: relative;
display: inline-block;
}
#image1 {
position : relative;
z-index: 10;
}
#image2 {
position : absolute; /* Different than #image1 */
z-index: 20; /* On top of #image2 */
top: 0;
left: 0;
/* Assuming width/height of both images are the same */
}
JS Fiddle
http://jsfiddle.net/n496j/1/
First change second image id to image2.
2 tricks for centering your images is:
add one of these classes to your images:
.center {
display: block; /*can remove this line*/
margin: 0 auto;
left: 0;
right: 0;
}
.center {
left: 50%;
margin-left: -[your image width / 2]
}
Use the css
img{ display:block; margin: auto; }
well, it will help if the images would sit in some container with text-align:center;.
something like this:
// body can be be replaced with any element which contains the images
body{ text-align:center; }
body > img{ display:inline-block; max-width:49%; }
Demo page:
http://jsbin.com/hehot/1/edit
How can I make the outside div always underneath the current item div. the code works fine but if it has two lines, like the image below.
The outside div would be on the top if I click box6 or box7. If there is a way I could make outside div change the position dynamically?
<div class="container">
<div class="item" data-content="1">1
</div>
<div class="item" data-content="2">2
</div>
<div class="item" data-content="3">3
</div>
<div class="outside">
</div>
</div>
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
Sample online http://jsfiddle.net/nm3Y4/
Thanks a lot for the answers and your time. I think I didn't make it clear, so what I wanted to achieve is that, if you click box1, should looks like the image below
and when click on box6 or box7 should show like below
so which means that outside below current item div
Thanks again
You could change the value of top property of the absolutely positioned .outside element according to the height of the .item box and the top offset of the current clicked item:
$('.item').click(function(event) {
var $this = $(this);
var contentNumber = $this.data("content");
$('.active').removeClass('active');
$this.addClass("active");
$('.content').hide();
$('.content'+contentNumber).show();
$('.outside')
.css('top', $(this).offset().top + $(this).height() + 'px')
.slideDown();
});
UPDATED DEMO.
As a side-note: It's better to position the .outside element relative to the .container rather than the initial containing block.
.container {
/* Create a containing block for the absolutely positioned elements */
position: relative;
}
Also float: left; declaration is redundant for the .outside as it's positioned absolutely.
As per your update, you could relative positioning and add top property in order to position the items (which their top offset is higher than the current clicked item) when the click event is triggered:
.item {
/* other styles here... */
float:left;
position: relative; /* Position the items relatively */
}
$('.item').click(function(event) {
var $this = $(this);
// ...
$('.item').filter(function() {
return $(this).offset().top > $this.offset().top;
}).css('top', $('.outside').height() + 'px');
// ...
});
Then reset their position when the .outside is closed:
$('.close').click(function(){
$('.item').css('top', '0'); // reset the top property/value
$('.outside').slideUp();
$('.active').removeClass('active');
});
UPDATED DEMO.
remove position:absolute and top:80px and add clear:both;
.outside {
background:yellow;
background: #222222;
clear:both;
display: none;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
DEMO
since question is updated, this answer doesnt fit the need,
i leave it here just because it shows behavior of absolute element if no coordonates are given ...
you could reset white-space and not float the divs to keep them on 1 line.
http://jsfiddle.net/nm3Y4/7/
.slider {
margin: 10px 0;
width: 580px;
height: 250px;
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
.item {
width: 60px;
height: 60px;
display:inline-block;
background:red;
margin:10px;
cursor: pointer;
}
.content {
display:none;
}
.active {
background:blue;
}
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
.close {
float:right;
cursor: pointer;
margin-right:10px;
}
.container {
white-space:nowrap;
}
.outside {
white-space:normal;
}
or do not let your box float, inline-block is just fine, and remove the top coordonates, see : http://jsfiddle.net/nm3Y4/9/
I have a menu like this
Home About Privacy Shopping Contact Us
I want to show this menu in the center of its container (whatever the width of the container is). I can apply 20% width to these list-item but then some list-item has more spacing in between and others have little due to different sizes of texts
<div id="container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Privacy</a></li>
<li><a>Shopping</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
Try using Flex Box layout (Demo):
#container ul {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal
}
#container li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
border: solid 1px #000;
text-align: center
}
This method allows you to use your 20% width and center the items in your container, all while keeping the same width of each item.
ul {
list-style-type: none;
width: 700px;
margin: 0 auto;
}
#container {
width: 800px;
background: #CC9;
}
li { display: block;
float: left;
width: 20%;
margin-left: -5px;
background: #399;
text-align: center;
border: solid black 1px;
color: white;
}
which you can view here... http://jsfiddle.net/r6Wwf/15/
I added a negative margin-left to compensate for the border I added so you get a better visual of how it works. I also set the width of the ul to 700px. This could be any width.
To set the entire menu in the center of a container add this to your css:
ul { margin: 0 auto; }
And then add a width to your container. This is all in the fiddle. You can set the width of the container to whatever you want. I have it at 800px.
If you're okay adding a containing element (nav is probably the most suitable), here's a good solution for you:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Shopping</li>
<li>Contact us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
float: left;
position: relative;
left: 50%;
padding: 0;
list-style: none; }
nav ul li {
float: left;
position: relative;
right: 50%;
margin: 0 10px; }
nav ul li a {
padding: 5px;
display: block; }
Preview: http://jsfiddle.net/Wexcode/bKH79/
If you want each li element to be 20% of the width of the container, just set the container to have width: 100% and set each li element to have width: 100% (you would also need to remove the margin from the li and add text-align: center).
See: http://jsfiddle.net/Wexcode/bKH79/2/
The best way to horizontally center elements in CSS is to give it a specific width, and then give it margin: auto;. Here is an example I made real quick. You can see the ul (blue border) has a width of 300px and it sits centered inside the 500px container (red border): http://jsfiddle.net/r6Wwf/4/. You can space the list elements however you would like.
What is the container width exactly..?
ok Let me assume its 960px now give width to your ul element so that the list item will not go in second line.Suppose it has taken 600px now in this case your CSS for making menu items in CENTER will be:
.container{width:960px;}
.container ul{width:600px;margin:auto}
Hope it'll solve your problem.
Pretty simple.
div#container {
width: 300px;
margin: auto 0;
}
div#container li {
display: inline-block;
padding: 15px;
}
You would definitely need to write some JavaScript to make this happen. This is how I would do it... http://jsfiddle.net/rb39A/1/
By using a little bit of jQuery you can get the dynamically sized containers you're looking for.