I have the following code for an image slider. It is a bit complicated because i want to use the slider code for multiple slider elements on the page. See below the code for one slider:
The problem i am having is described at the bottom.
$(document).ready(function(){
$('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
// image slider interaction with user
$('.right').click(function(){
next($(this).data('id'));
});
$('.left').click(function(){
previous($(this).data('id'));
});
});
function next(img_class){
var count;
$('.current'+img_class).animate({left: 0}, 500, function(){
console.log("animated?");
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);
if($('.previous'+img_class).is(':last-child')) {
count = $('.'+img_class).first().data('num');
$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).next().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
});
}
function previous(img_class){
var count;
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
if ( $('.previous'+img_class).is(':first-child')) {
count = $('.'+img_class).last().data('num');
$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).prev().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
}
.main_image_slide_container{
position: fixed;
left: 50px;
right:50px;
width: 500px;
height: 500px;
}
.image_slide_container_all_text_wrapper{
width: 100%;
height: auto;
overflow: overlay;
}
.image_slider_title{
float: left;
}
.image_slider_counter{
float: right;
}
.main_image_slide_container .image_slider_counter{
display: none;
}
.image_slide_container_all_text_wrapper .image_slider_counter{
display: block;
}
.slider_images_wrapper_window{
width: 100%;
height: auto;
position: relative;
}
.image_slider_controls{
position: absolute;
z-index: 10;
width: 50%;
height: 100%;
}
.left{
left: 0;
cursor: default;
}
.left:hover{
cursor: url(../../data/cursor_left.png) 40 30, move;
}
.right{
right: 0;
cursor: default;
}
.right:hover{
cursor: url(../../data/cursor_right.png) 40 30, move;
}
.slider_images_container{
width: 100%;
height: auto;
}
.slider_images_container img{
position: relative;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
<div class="image_slide_container_all_text_wrapper">
<div class="image_slider_title big_text font">Gravient Vertical</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
</div>
<div class="slider_images_wrapper_window">
<div class="image_slider_controls left" data-id="vertical_img"></div>
<div class="image_slider_controls right" data-id="vertical_img"></div>
<div class="slider_images_container">
<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
</div>
</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
</div>
So my current problem is that the images are not animating to the left. And i dont know why.. I am pretty sure my animate syntax is correct. I copy pasted it from the jquery website.
All suggestions and tips are welcome.
If something is not clear please let me know so i can clarify it!
You have missed the invisable css. Here is the working Example.
jsfiddle
Related
When a user clicks an image I would like it to clone as a fixed and more larger image but when I try to use the toggleClass() function, the image moves from it's previous location which I do not want. I want to be able to click an image and get a bigger view and be able to toggle it back while only limiting one image at a time
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count<2){
$(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
$(this).toggleClass("zoom");
count++;
}
});
});
.img_container {
justify-content: center;
display: inline-flex;
margin: 5px;
list-style: none;
}
.img_box {
height: 100px;
margin: 5px;
cursor: pointer;
}
.img_box1 {
}
.zoom {
position: fixed;
max-width: 55%;
height: 85%;
left: -50%;
right: -50%;
top: 9%;
margin: auto;
padding: auto;
z-index: 9999;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-0llDSWL9Xm0/Ta0fJ3ulMDI/AAAAAAAAAAk/G5O-DfxD3PI/s1600/7.jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='https://ichef.bbci.co.uk/images/ic/1200x675/p049tgdb.jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-uctFXnJjKvc/UCF-SlHorHI/AAAAAAAAAIU/Y4vtiVI1Jjk/s1600/animal+(5).jpg' ></li>
</div>
<div class='img_container'>
<li><img class='img_box' src='http://1.bp.blogspot.com/-g913BsBiiq4/UAFN4Z2XQBI/AAAAAAAADtc/EdyJQODnHBw/s1600/baby-animal-wallpapers-1.jpg' ></li>
</div>
It should work.
var zoom = false;
$(document).ready(function(){
$(".img_box").click(function(){
if(!zoom){
$(this).clone().attr({ 'class': 'img_box zoom' }).insertAfter(this).click(function(){$(this).remove();zoom=false;});
//$(this).toggleClass("zoom");
//count++;
}
});
});
Basically I was also thinking about .insertAfter(this) idea. Added a fiddle here guessing the functionality expected. Can give it a look.
I removed the zoomed image if the count is larger and decremented the count again so that a new image can be clicked and zoomed.
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count>1)
{
$('.img_box1').remove();
count--;
}
$(this).clone().attr({ 'class': 'img_box' + count+' zoom' }).insertAfter(this);
//$(this).toggleClass("zoom");
count++;
$(".img_box1").click(function(){
$('.img_box1').remove();
count--;
});
});
});
You can do it like this: https://codepen.io/creativedev/pen/PBpjVP
JS
var count = 1;
$(document).ready(function(){
$(".img_box").click(function(){
if(count<2){
$(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
count++;
} $(this).toggleClass("zoom");
});
});
CSS:
.img_container {
justify-content: center;
display: inline-flex;
margin: 5px;
list-style: none;
}
.img_box {
height: 100px;
margin: 5px;
cursor: pointer;
}
.img_box1 {
}
.zoom {
width: 100%;
height: 100%;
margin: auto;
padding: auto;
z-index: 9999;
border: 1px solid blue;
}
I am very new to web development and I am trying to make a basic slider using JQuery. However when slide3 is moving to left:0 it is still visible when moving across the screen. I am unsure of what I have done wrong to cause this and would love to know!
var slide1 = "#slide1";
var slide2 = "#slide2";
var slide3 = "#slide3";
function slideAnimation(moveOut, moveIn, delay1, delay2) {
setTimeout(function() {
$(moveOut).animate({
left: '-100%'
}, 2000);
$(moveIn).animate({
left: '0'
}, 2000);
}, delay1);
setTimeout(function() {
$(moveOut).hide();
$(moveOut).animate({
left: '100%'
});
$(moveOut).show();
}, delay2);
};
function contentSlider() {
slideAnimation(slide1, slide2, 5000, 5200);
slideAnimation(slide2, slide3, 10000, 10200);
slideAnimation(slide3, slide1, 15000, 15200);
};
$(document).ready(function() {
contentSlider();
});
setInterval(function() {
contentSlider();
}, 25000);
.index3 {
height: 482px;
width: 100%;
position: relative;
}
#contentSlider {
position: absolute;
width: 100%;
min-height: 482px;
overflow: hidden;
}
.slideArea {
position: absolute;
width: 300%;
left: -100%;
height: 100%;
line-height: 400px;
font-size: 50px;
text-align: center;
left: 0;
}
#slide1 {
background: url(Images/slide1bkg.jpg) center;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 0;
}
#slide2 {
background: url(Images/slide2bkg.jpg) center;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 100%;
}
#slide3 {
background: url(Images/slide3bkg.jpg) left;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="index3">
<div id="contentSlider">
<!-- slide one content -->
<div id="slide1" class="slideArea">
<h5>Slide 1</h5>
</div>
<!-- slide two content -->
<div id="slide2" class="slideArea">
<h5>Slide 2</h5>
</div>
<!-- slide three content -->
<div id="slide3" class="slideArea">
<h5>Slide 3</h5>
</div>
</div>
<!-- link to javascript for content slider -->
<script src="slideshow.js" type="text/javascript"></script>
</section>
Any help or suggestions would be greatly appreciated, please let me know if you need anymore info!
Thanks!
You have to hide() on callback of the animation that slides -100% left.
function slideAnimation(moveOut, moveIn, delay1, delay2) {
setTimeout(function () {
$(moveOut).animate({left: '-100%'},2000,function(){ $(moveOut).hide();});
$(moveIn).show(); // Added a show() here
$(moveIn).animate({left: '0'},2000);
}, delay1);
setTimeout(function () {
//$(moveOut).hide();
$(moveOut).animate({left: '100%'});
//$(moveOut).show();
}, delay2);
};
See Fiddle : https://jsfiddle.net/Bes7weB/xuurk73s/
I'm trying to make a chat HTML template. But I'm having some problems to make scrolleable the messages area.
My structure is like this:
Chat header: to the top with the title of the chat or name person.
Chat input message: to the bottom you can write.
Chat visible area: total height - (chat header height + chat input message height).
Messages: Must increment it height but always be at the bottom of the chat visible area, to read the last message.
All this structure lives with other html elements, is not fullscreen.
My HTML structure is like this:
<div id="chat-1" class="chat-ventana">
<div class="chat-header">
<h4>Header</h4>
</div>
<div class="chat-mensajes-contenedor">
<div class="chat-mensajes-contenedor-general">
<div class="mensaje-contenedor">
<!-- messages content -->
</div>
</div>
</div>
<div class="chat-textarea">
<textarea class="form-control" placeholder="Type your message"></textarea>
</div>
</div>
And my CSS looks is this:
.chat-container {
height: 70vh;
min-height: 400px;
}
.chat-ventana {
position: relative;
display: inline-block;
width: 65%;
float: left;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 15px 15px 20px 15px;
}
.chat-header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.chat-mensajes-contenedor {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
height: 400px;
}
.chat-mensajes-contenedor-general {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor {
height: calc(100% - 46px);
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 66px 20px 25px 20px;
}
.chat-textarea {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-textarea .form-control {
resize: none;
height: 46px;
padding: 10px 20px;
}
I see if I set .chat-mensajes-contenedor-general to position: relative; it becomes scrolleable but I can't position it to the bottom.
I think I get what you're after.
And it's probably obvious but since you didn't say we can't use javascript you can of course employ a little of it (using jQuery in the case below) to achieve the same end result:
[JSFIDDLE]
function returnScrollHeight() {
return this.scrollHeight;
}
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
$('textarea.form-control').on('keyup', function (e) {
if (e.ctrlKey && e.keyCode === 13) {
$('.mensaje-contenedor').append('<div class="line">' + this.value + '</div>');
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
this.value = '';
}
});
I couldn't come up with a non-js solution in the brief time I tried. Hopefully someone else will come along and give the pure html/css answer.
Here is a fiddle: https://jsfiddle.net/gLahjk5z/3/
I changed the position styles to position: relative and altered some of your height elements.
I then added this Jquery function to run on document ready:
$(document).ready(function() {
var bottom = $(".mensaje-contenedor").height();
$(".chat-mensajes-contenedor").scrollTop(bottom);
})
To make messages always appear at the bottom use this CSS:
.chat-mensajes-contenedor-general {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mensaje-contenedor {
align-self: flex-end;
}
I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}
You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO
Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.
Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.
I prepared this:
http://jsfiddle.net/hXpWh/2/
When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on.
Here is the js code:
moped = "";
$(".container").mouseenter(function () {
$(".content").css('background', function () {
moped = $(this).css('background');
return "green";
});}).mouseleave(function () {
$(".content").css('background', function () {
return moped;
});
});
html:
<div class="container">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container</p>
</div>
</div>
<div class="container2">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container2</p>
</div>
</div>
css:
.container {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.container2 {
position: absolute;
top: 0;
left: 255px;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.content {
display: block;
background: red;
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption {
display: block;
background: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption p {
position: relative;
bottom: 10px;
left: 10px;
}
The other answers show what's wrong in the jQuery code, but another fix is to just using CSS for this.
Give the outer elements a common class, then:
.cont {
background:red;
}
.cont:hover .content {
background: green;
}
DEMO: http://jsfiddle.net/hXpWh/4/
But with respect to the jQuery code, not only do you need to find the nested .content, but also, there's no need for the variable. Just set the background to "" in the mouseleave.
$(".container").mouseenter(function () {
$(this).find(".content").css('background', "green");
}).mouseleave(function () {
$(this).find(".content").css('background', "");
});
Change $(".content") to $(this).find(".content") in the .mouseenter function, and it will only change the one that you hover over. You could change it to $(".content", this), but as per epascarello in the comments, it is not as efficient.
Well , you could either move the css background attribute or do this:
moped = "";
$(".container").mouseenter(function () {
$(this).children(".content").css('background', function () {
moped = $(this).css('background-color');
return "green";
});
}).mouseleave(function () {
$(this).children(".content").css('background', function () {
return moped;
});
});
My advice is do it with the script and refactor it , use .hover() and name the mouseenter and mouseout functions separately.
Good luck, mate.