Jquery slide panel moves adjacent picture down - javascript

I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.
Here's the jsfiddle without the image files:
https://jsfiddle.net/amyspod/q2obknwt/
Here's my code:
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
<div class="panel" id="hero">PSD to responsive website</div>
</div>
<div class="image2">
<img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
<div class="panel" id="oak">PSD to responsive website 2</div>
</div>
</div>
.myImg {
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin-top: 40px;
}
/*slider panels*/
.image1, .image2{
display:inline-block;
margin-left: 10%;
}
.panel {
padding: 10px;
text-align: center;
background-color: white;
font-size: 20px;
display: none;
}
$(document).ready(function(){
function slidepanel(x,y){
$(x).mouseenter(function(){
$(y).slideToggle("slow");
});
$(x).mouseleave(function(){
$(y).slideToggle("slow");
});
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});

Inline (or inline-block) elements align to the baseline. Try this:
.image1,
.image2 {
...
vertical-align: top;
}
Demo
Also note that CSS classes, by design, are intended to be reusable. I see no reason to have two of them in this case, and they should have semantic values that describe their use or function.

Related

Image map area changed upon using plugin

So I'm using this image map plugin so that the area is fixed to the image even when I resize the window or zoom in.
I want to make my codes that when you click, it'll call the specified function. So far it works (function is called) but for some reason when I add this implementation code to my <script>, it alters the area to a smaller size. When I remove it, the area goes back to the original size.
$(function () {
ImageMap('img[usemap]');
//check for plugin implement
alert("ImageMap plugin enabled");
});
I'd just remove the above code because apparently the area doesn't resize when I resize my window, but this is just a sample code to test. What's weirder is that when I use the template for my actual codes (just the same codes but the image and text content changed), my image map doesn't even work.
Here's the full code (the changes are on the third picture on the right):
$(function () {
ImageMap('img[usemap]');
//check for plugin implement
alert("ImageMap plugin enabled");
});
function selectASC() {
alert("Hello");
}
body {
background-color: #CFFFE7;
overflow: hidden;
}
#master {
display: table;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 70px 60px 70px;
height: 100%;
}
p {
font-weight: bold;
font-size: 20px;
font-size: 2vw;
font-family: sans-serif;
}
#diagrams {
background-color: lightblue;
text-align: center;
}
.logo-image {
vertical-align: middle;
display: table-cell;
}
.logo-image img {
max-width: 90%;
max-height: 90%;
}
<div id="master" class="container">
<p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
<p>
This is a very long sentence.
<br/> This is a very long sentence.</p>
<div id="diagrams" class="container">
<div class="wrapper clearfix">
<div class="logo-image">
<img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" usemap="#image-map"/>
<map name="image-map">
<area coords="0,0,338,338" alt="" shape="rect" title="test" href="#" onclick="selectASC()">
</map>
</div>
</div>
</div>
</div>
The outcomes of both my example code and actual code are different, and I'm certain my html/css codes don't affect the results since they're the same but just different image and text content.

Overlay div that snaps on overflow with parent

Problem:
Essentially I have a row of in-line containers with images inside them, and an overlapping div with text at the bottom of the div/image. When the window is resized horizontally, the image and div snap to the row below it and stay inline. However, the overlay does not snap with them until it is completely covered by the horizontal resize of the window, which only then it will snap below the row and appear with the rest of the container.
If you keep resizing the window horizontally, eventually the overlay div will snap down and appear in its correct position.
Question:
How can I make it, via CSS, JS or jQuery, so that the overlay div follows the container it's in when the overflow forces the containers into the next row?
#container {
position: relative;
display: inline;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
Example Fiddle: https://jsfiddle.net/buqbxgzz/2/
There are several issues with your code:
You are recycling IDs in your markup. IDs must be unique in a document. For example, use .container instead of #container.
Using position: absolute and display: inline on the overlay doesn't make a lot of sense, because it will be set to block level automatically (i.e. display: block).
Also, as long as you switch to display: inline-block on the container elements, the positioning will work. The reason is a bit convoluted, but if you look at the elaborate description of stacking contexts by W3C, you can see that inline level elements have a very different (and probably counterintuitive) characteristics described, compared to inline-block or block elements.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
See fixed fiddle: https://jsfiddle.net/buqbxgzz/4/
Try:
#container {
position: relative;
display: inline-block;
}
Specify the width to the container instead of the overlay div node and give the latter element a 100% width. Here is the code:
#container {
position: relative;
display: inline-block;
width: 304px;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 100%;
bottom: 0;
}
Here is it working: https://jsfiddle.net/buqbxgzz/5/
Edit:
I've just realized you are using a duplicate ID in your code. ID's must be unique. Change the container and overlay to classes
Is this the thing you are looking for? Btw, id attributes of elements should better be unique. For applying the same styling rules classes are used.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
display: inline-block;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>

Centering a floated image in CSS

I have a javascript code and it needs to place images in different heights in a certein div according to the code. However, I also need the images to be centered. I searched the web and found different solutions such as using display:inline-block instead of float, but then the different heights don't work. Nothing I found seems to do the trick.
Here's the Javascript code that generates the final tags, margin_top is the variable that has the height difference needed.
var added_tags = ('<img style="margin-top:'+ margin_top.toString() +'px; float:left; margin-left:5px;" src="[Image source]" /> '+'<a></a>');
You can't center floated elements. display: inline-block on the to-be-centered elements and text-align: center on their container is the way to go.
Concerning vertical alignment of different heights, you can use vertical-align: middle or top or bottom on the inline-block elements, whatever you need.
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: middle;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
OR
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: top;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
OR
.wrap {
text-align: center;
}
.wrap>img {
display: inline-block;
vertical-align: bottom;
}
<div class="wrap">
<img src="http://placehold.it/100x150/fa0">
<img src="http://placehold.it/80x70/a0f">
<img src="http://placehold.it/200x180/af0">
<img src="http://placehold.it/50x120/f7a">
</div>
if you must use floated element the desired result can be acheived:
section {
padding:20px;
margin:20px;
border:1px solid silver;
box-sizing:border-box;
}
span {
float:right;
}
section.centre span {
margin-right:50%;
transform:translateX(50%);
}
<section>
<span>ALPHA</span>
<br style="clear:both;" />
</section>
<section class="centre">
<span>BRAVO</span>
<br style="clear:both;" />
</section>

CSS: Align children elements like 'filling up columns'

I have a div-container, which has one main image and optional multiple smaller images: http://jsfiddle.net/h5kc8ybm/
The multiple smaller images are generated dynamically, so there can be just 1 or 10 of them. On my JFiddle you can see, that the images are just displayed in one single row.
What I want to achieve is, that there are filled up 'by colomns':
First image on top next to the main image (like shown in this example)
Second image below that (not right of it, like in the example)
Third image right of first image (top)
Fourth image below third image
...and so on.
Is it possible to do that just with CSS?
Update
To avoid misunderstanding: All smaller images should be positioned right of the main image. But these small images should be displayed in two rows, filled up from first row to second row.
The main div-element will never change its height, but only its width.
Example
HTML
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
LESS
.tnwrapper {
background-color: #f5f5f5;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: inline-block;
.tn {
display: inline-block;
vertical-align:top;
position: relative;
margin-right: 5px;
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail.child {
width: 40px;
}
}
}
I was able to do this with the following steps:
wrap the smaller children in a div and make it position:relative
apply position:absolute on even items and reposition them
float them left
http://jsfiddle.net/0neukb08/
The downside of this approach is that it hardcodes the image's size in the "reposition" step
Additionally, the reason I chose not to use flex-box here was this issue with growing its width (I also didn't like the highest voted answer), but flexbox is a good option if you know the container's width in advance.
You probably can do this by
Rotate the container -90deg and reflect it:
.tnwrapper {
...
transform: rotate(-90deg) scaleX(-1);
}
then apply the reverse transformation for the thumbnails:
.tnwrapper .tn {
...
transform: rotate(90deg) scaleX(-1);
}
JSFiddle: http://jsfiddle.net/h5kc8ybm/1/
Note though that the height limit of the container is now width, not height (because it was rotated -90deg.
CSS flexbox styling should do the trick:
.tnwrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.tn:first-child {
height: 192px;
width: 192px;
}
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
EDIT: Sorry, the above snippet doesn't quite answer the question after all. This snippet places each subsequent image in left-to-right then top-to-bottom order, rather than top-to-bottom then left-to-right order as the question asked. I think adding a div around the first image would be the cleanest way to accomplish what you want.
I'm not quite clear on the order of the thumbnails but I think you wanta column format for those.
I that case wrap the main image and the thumbnails in separate divs and then flexbox can do the rest.
.wrap {
display: flex;
margin: 1em auto;
height: 280px;
}
.hero {
padding: 10px;
}
.sidekicks {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.sidekicks .item {
width: 96px;
height: 96px;
margin: 10px;
background: lightblue;
line-height: 96px;
text-align: center;
}
<div class="wrap">
<div class="hero">
<img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" />
</div>
<div class="sidekicks">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
Codepen Demo
This is solution with flexbox and since you said that height of main-div wont change this should work http://jsfiddle.net/h5kc8ybm/13/
CSS
.tnwrapper {
background-color: #000;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: -webkit-flex;
display: flex;
}
.child-images {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 10px;
height: 170px;
}
.tnwrapper .tn .thumbnail {
padding: 4px;
margin: 10px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.child-images .tn img {
width: 40px;
}

T-shirt image hover (based on different colors)

So ive seen some jquery hover effects, but none that can do the multiple choices hover.
Basically i have 5 t-shirt color choices, that when each one is hovered over, it should pop up where the current (green t-shirt) is located.
Heres link - http://musclefire.com/26.php
Note: there will also be other t-shirt styles on this page as well, so not sure if this will be too much code/complex for this to work properly.
p.s. - whoever nails it and gets perfect code, i'll send out a free tee to ya!
thanks much!
I'm pretty sure this is what you're looking for:
Demo: http://plnkr.co/edit/jiNxcw9nHQD5gV4vvwlj?p=preview
HTML
<div id="main">
<img class="active" src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
<div id="thumbs">
<img src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
CSS
#main {
border: solid 1px #eee;
text-align: center;
}
#thumbs {
border: solid 1px #eee;
text-align: center;
}
#main img {
width: 300px;
display: none;
}
#main img.active {
display: inline-block;
}
#thumbs img {
width: 50px;
height: auto;
}
jQuery
$(function(){
$('#thumbs img').bind('hover', function(){
var which = $(this).attr('src');
$("#main img:visible").hide();
$('#main img[src="' + which +'"]').stop().fadeIn(800);
});
});
All I know you cannot do this with css. So you should use javascript or jquery for this.
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
For example:
.parent:hover .child{}
.child{}
<div class="parent">
<div class="child"></div>
</div>
You can do what you wanted with jquery,
Live demo : http://jsfiddle.net/XUM8R/

Categories