I'm trying to make animation when opening image kinda like is here: http://arzbhatia.com/ in portfolio section.
This is what I've already done, but it's not working properly.
Here is jFiddle of what I've done: jFiddle
The div is showing in the same place, no matter which image I click. If I remove position:absoulte from #test_div it seem to add div after image, moving rest of them to the bottom.
I did change your fiddle, and created rows. Try it like this:
http://fiddle.jshell.net/MYXcf/4/
You have to put another div named description into all you li.
Like this :
<div id="gallery">
<ul>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
</ul>
</div>
And some css to style this up :
ul {
list-style-type: none;
}
#gallery {
height: 500px;
margin: 0 auto;
width: 500px;
margin-top: 100px;
}
.click_images {
vertical-align: top;
display: block;
position: relative;
}
.gal_images {
height: 220px;
width: 220px;
float: left;
font-size: 40px;
color: #fff;
margin: 5px;
}
.image_item {
width: 220px;
float: left;
}
#test_div {
position: absolute;
top: auto;
height: 200px;
width:100%;
background: #000;
overflow: hidden;
}
.description {
display: none;
}
And the jQuery, will toggle if the description is already opened or not, if its opened, it'll hide, else it'll open.
var opened = false;
$('.image_item').click(function () {
if (!opened) {
opened = true;
$(this).find('.description').slideDown('500').append('hahaha');
} else {
opened = false;
$(this).find('.description').slideUp('500');
}
});
You'll find a fiddle here: http://jsfiddle.net/fm9L4/
The div is in the same place because the images are being floated out of their parent (the LI). This is visible in the Chrome Dev Tools if you hover over the list elements.
The fix is to not float anything and to make the LIs display:inline-block so that they occupy space in the dom. You also need to add some Javascript to increase the height of the LI to accommodate #test_div when it gets added because it's positioning is absolute.
Full code here: http://fiddle.jshell.net/MYXcf/3/
Updated code here: http://fiddle.jshell.net/MYXcf/5/
Related
Whenever I set the div width to 100%, and I add new elements to it, it expands over the screen border.
When I set the div to the pixel value, it works fine, but it won't look proper on two different screen resolutions.
So the thing I want is to have a div which would fit the edge of the screen and expand properly.
JSFiddle:
https://jsfiddle.net/272p06ng/4/
Spam on Add Tab a few times to see the problem. Then look for .l_tabs in CSS and read the comment. I believe that the problem is in the parent classes of l_tabs.
Div with % value behaves like this:
Div with pixel value shows the behavior I want:
Tabs Construction:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab active "></li>
<li.....></li>
</ul>
</div>
</div>
CSS:
.l_tabs {
background: #474544 none repeat scroll 0 0;
display: block;
height: 57px;
overflow: hidden;
width: 100%; /* 1st picture */
width: 1370px; /* second picture */
}
.l_tabs > div {
background-color: #474544;
height: 57px;
padding-top: 4px;
width: 100%;
}
.l_tabs > div > ul {
overflow-x: auto;
white-space: nowrap;
width: 100%;
}
And there are some parent wrappers with also width 100%.
EDIT:Adding position:absolute to l.tabs
fixed the problem.
.l_tabs {
height: 57px;
display: block;
width: 100%;
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}
I'm trying to make the #header div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?
#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}
<a href = 'index.php'>
<div id = 'header'>
<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
</a>
Now while the image link works just fine, the #wrapper div is not clickable.
#header {
border: 1px solid red;
background-color: red;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
height: 50px;
}
#header a:first-child {
display: block;
height: 100%;
}
#header a:last-child {
position: absolute; /* image now independently clickable */
top: 0; /* position image anywhere you want inside #header */
left: 0;
}
img {
width: 50px;
height: 50px;
}
<div id='header'>
<a href='index.php'></a>
<a href='profile.php?username=$username'>
<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
NOTES:
If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?
Instead, make the #header element entirely clickable, and absolutely position the image.
Now the image can be clicked separately and positioned anywhere inside the #header element.
I have a number of images on a page. Each image has a CSS spinner that I want to show before each image is loaded. At the moment, I have it where when 'img' loads, the class 'spinner' is removed. This works but isn't what I want, as it removes the class 'spinner' whenever any 'img' is loaded.
Each img has it's own spinner and I want to only remove each 'individual' spinner class as each image loads.
Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/xvx6maty/
Here is the code:
HTML:
<div class="work_items_wrapper">
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link_no_margin" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
</div>
scss:
.work_items_wrapper{
margin: 2.8em auto;
}
.work_item_link{
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.work_item_link_no_margin{
position: relative;
width: 32%;
height: auto;
float: left;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.spinner{
width: 5em;
height: 5em;
background: red;
position: absolute;
}
Javascript:
$('img').on('load', function() {
$("div").removeClass("spinner");
}).each(function() {
if(this.complete) $(this).load();
});
I replaced the first line of javascript with this to test again:
$('img').on('click', function() {
When I clicked only one of the images, all 3 spinner classes were removed.
How can I go about doing it so that when one image loads, that image's individual spinner is removed. Is it a case of looping through the images or something?
Any help would be highly appreciated.
Thanks.
Try the following:
$(this).siblings('div').removeClass("spinner");
This will remove the class for the div which is on the same level and has the same parent as the img in question.
JS Fiddle Demo
Try changing the removeClass line to this:
$(this).prev().removeClass("spinner");
This will get the current selection, this, which is the img which was loaded, and get it's previous sibling, which is the div you want.
You need to use .prev() to find previous div
Use
$('img').on('load', function() {
$(this).prev("div").removeClass("spinner");
});
DEMO
I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}
This is probably one of the weirdest things I've seen... I have a list of elements and each contains an icon image and a hidden pop-up box. When the user hovers over the icon, the popup box is display above (jQuery's hover). This works fine in all browsers and IE8/9, but IE7 has an issue. There's a 'gap' between the icon and the popup box. If I set a background color and the popup box's container is touching the row of icons, I can keep the popup box displayed on the screen as the user moves their mouse through it to make a selection.
However, I don't want a background color displayed, and when it's not, the popup box will disappear when the user moves their mouse anywhere in that gap. In other words, the popup displays in the correct position, but the user can't make a selection because there's no way to get to the popup without hovering over the gap.
Here's some HTML and CSS:
<div class="icon-nav">
<ul>
<li>
<div class="popup-wrapper">
Air Quality
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
<li>
<div class="popup-wrapper">
Public Health
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
Etc....
</ul>
</div>
CSS:
.icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */
.icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; }
.icon-nav ul li { float: left; }
.icon-nav ul li .popup-wrapper {}
.icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; }
.icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; }
.icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }
jQuery:
$('.icon-nav li .popup-wrapper').hover(
function(){
$('a',this).addClass('hover')
var name = $('a', this).attr('rel');
var popup = $('.popup-container', this);
$(popup).css({'display':'block'});
// More Code...
},function(){
$('a',this).removeClass('hover');
$('.popup-container', this).css({'display':'none'});
}
);
TIA!!!
Create a 1pixel square transparent png, and use that as your elements background.
Just a quick something to try:
Set the css rule
background-color: transparent
on the div that contains the gap (I guess that'd be .popup-container).