Div Click on Image / Slide to new div possible with JQuery? - javascript

I am looking for some way to click on an image or link on a Div and it will slide to another div without changing to height...so something like the below
<div id="div1">
<img src="image.jpg" onclick="slide_to_other_div" />
</div>
<div id="div2" style="display:none">
<p>Another Div Here</p>
</div>
But I don't want an accordion effect... I want to slide to Div2 without affecting the height?
Explained further ...
Suppose you have a table>
<table>
<tr>
<td id="div1">Slide to Div2 Direction --> </td>
<td> id="div2" style="display:none">This is Div 2</td>
</tr>
</table>
So, Div1 scrolls sideways to Div2 when I click on the link to Div2

I'm not entirely sure I know what you want to have happen, but here are a series of steps which might accomplish your goal?
Calculate the current image height and explicitly set it so that it won't change.
Calculate the current absolute image position
Calculate the absolute div2 position
Detatch the image from div1, set it's style to be position absolute with the absolute position calculated earlier, and attach it to body
Animate the top and left properties of the position so it "slides" to the new location
Detatch the image from body, remove absolute positioning values, attach it to div2, and show div2
Does that sound like what you are looking for? Each of those steps can be accomplished via jquery.
EDIT: Now that I think I'm understanding you more, you are probably looking for a horizontal accordian. You could code this from scratch, but I would suggest looking at existing solutions to guide you (or to simply use). Here is an example of one. Google "horizontal accordian" to find more if that doesn't suit your fancy.

additional HTML:
<a name="myAnchor"></a>
Jquery:
$('#div1 img').click(function(){
window.location = "/currentpath_or_link#myAnchor";
});
It wont give you a nice animation but it will get you to there.
If you want a nice animation you will need the function scrollTo()
but I never worked with that.

Related

element is position absolute but must still relative in parentDiv to make it like slider

So my problem here is that I want to make a slider in parentDiv but I make a simple example which is when I click the item it will become the main screen of the screen border...but in opposite when I click it over again it will turn back.. I'm using gsap but you don't have to worried about the gsap functionality because I just used it to make it simplier my animation but the logics of positioning does matter to me.
Here's the codepen.
https://codepen.io/yowyow3322/pen/GRQVevr
Also I put something here in the div just to make it more clarify.
<!-- <div class="parentDiv"> -->
<div class="stapler stapler1"></div>
<div class="stapler stapler2"></div>
<div class="stapler stapler3"></div>
<!-- </div> -->
So what's my point here? I want to make the stapler slider but that will be absolutely impossible because parentDiv is a position relative so that it will not off bounds the items when I will create it for sliding. It kind of seems impossible to me but I saw it somewhere in Pinterest which close to the idea of it.
As each div will be a layer on it's own, You need to manage that each layer should has a z-index more than the last layer by one. you can do that by JS

How to display only as many pictures within a div as there is space for them?

I have an empty div element like this:
<div class="mydiv"></div>
My product owner now wants to fill this div with pictures until there is no more space left (in vertical direction):
<div class="mydiv">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<!-- keep going until mydiv is full -->
</div>
Unfortunately, the size of this div element is unknown until the page is actually loaded since it's a responsive website and thus the size of the div is dynamically adapted to the size of the screen/browserwindow. We do know the size of the images though.
Is there a pure HTML/CSS solution for this?
The only way I can think of is to check the width + height of the div during runtime via JavaScript and then do the math to see how many pictures are probably gonna fit in there and then insert only the images that will probably go in.
Ok so there is a way to use it with "hacks" :
I made a first container that is the with you defined.
set overflow:hidden to this container
Then i made another container inside the first one but with greater width
Inside this container put all the images ( works vertically and horizontally, add float:left to my example to make it work horizontally )
Here is the example
You see that i made 4 images ( faked them with fix position divs ) and that we can see 2.5 of them because of the container width.
Hope this trick is what you're looking for :)
This is my solution in javascript :
var mydiv = document.getElementById('mydiv') // or by class not important
while(!(mydiv .offsetHeight < mydiv .scrollHeight
|| mydiv .offsetWidth < mydiv .scrollWidth)) {
mydiv.innerHTML = mydiv.innerHTML + '<img src="myimg.jpg" />;
}

Image sliding right to cover text then revealing new text as it slides back

I have an effect I want to achieve, but I'm having trouble thinking of exactly how I could achieve it. Here are some images that show the progression of the effect I want to achieve: http://imgur.com/a/In6IK
So essentially, I have multiple slides containing text which I want to automatically display one by one. In order to hide the current slide and show the next one, I want an image (which sits to the left of the text) to slide to the right, covering/hiding the text as it goes, and then when it slides back to its original position, the text for the next slide is shown.
So how would I go about achieving this effect?
Here is a raw idea. Maybe you can make use of :after and :before and position them so that they hide the text, making it disappear.
HTML would be something like:
<div class="main">
<div class="over"></div>
<div class="text">This is some text</div>
</div>
And for CSS look in this fiddle http://jsfiddle.net/Zs2MU/
Maybe it will help you in your situation.
UPD Here is updated solution which supports multiline text http://jsfiddle.net/Zs2MU/2/

How to make the hovered image on top of other elements

I am trying to hover images and enlarge the image and image info. I want the hovered images div on top of other image div instead of covered by other images div
I used z-index but it doesn't seem to work. Anyone got a good idears? Thanks a lot.
<div class='imgDiv'>
<img src='a.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='b.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='c.jpg' />
<p>hahaha</p>
</div>
<div class='imgDiv'>
<img src='d.jpg' />
<p>hahaha</p>
</div>
......
.....I have so many images divs....
CSS
.imgDiv{
float:left;
}
.imgDiv:hover{
//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)
}
Jquery
$('.imgDiv').hover(function(){
//not working...
$(this).css('z-index','999');
})
For the z-index to work, position must be absolute. You will probably have to toggle absolute positionning on hover, and set the top and left attributes so the div stay in place.
It will be easier if you're not having your divs floating.
Remember that absolute position is relative to the first positionned element. Not necessarily the body element. It is relative to the first parent that has its position set to something.
edit
As #ahren pointed out in his comment, I was wrong with z-index only workin with position: absolute;.
That said, I setted up a fiddle with your code except the javascript part, and it seems to work as expected. The behavior is the same with chrome / firefox / ie9. Maybe other parts of your html/css is causing the issue? Or I misunderstood the question?

IE8 jQuery text changes on z-index divs

I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?
I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.

Categories