Sliding of an image using carousel - javascript

I have problem with carousel,
I have tried a lot, but I am not able to solve
I have one carousel with 4 images.Here i want to like in 1st iteration:
1-2-3-4
2nd iteration: 4-5-6-7
3rd iteration:7-8-9-10
this will when we click on corousel.
here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CustomStyles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: false
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-inner .active.left { left: -25% ; }
.class-inner .active.right{left : 25%;}
.carousel-inner .next { left: 25% ; }
.carousel-inner .prev { left: -25% ; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
</style>
</head>
<body>
<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3"><img src="1.jpg" href="sa.html" class="img-responsive">1</div>
</div>
<div class="item">
<div class="col-md-3"><img src="2.jpg" class="img-responsive">2</div>
</div>
<div class="item">
<div class="col-md-3"><img src="3.jpg" class="img-responsive">3</div>
</div>
<div class="item">
<div class="col-md-3"><img src="4.jpg" class="img-responsive">4</div>
</div>
<div class="item">
<div class="col-md-3"><img src="5.jpg" class="img-responsive">5</div>
</div>
<div class="item">
<div class="col-md-3"><img src="6.jpg" class="img-responsive">6</div>
</div>
<div class="item">
<div class="col-md-3"><img src="7.jpg" class="img-responsive">7</div>
</div>
<div class="item">
<div class="col-md-3"><img src="8.jpg" class="img-responsive">8</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>


I think it would be better to use a different carousel:
http://bxslider.com/examples/carousel-dynamic-number-slides
It's easy to use and responsive ;)


Here you find exactly what you want.
http://kenwheeler.github.io/slick/
Please find below working demo.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>

Related

How to make carousel full width on mobile view

How to make my carousel turns to full width when I view on mobile phone or smaller screen device?
Any help would be appreciated.
You can check out the code below or simply view on my codepen here - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
display: block;
}
$('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
})

Hope It's Work for you !!!
jQuery(document).ready(function(){
jQuery('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
responsiveClass:true,
responsive:{
1000:{
items:2,
nav:true,
loop:true
},
600:{
items:1,
nav:true,
loop:true
},
0:{
items:1,
nav:true,
loop:true
}
}
});
});
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
background-color: salmon;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
</head>
<body>
<div class="contain">
<div id="owl-carousel" class="owl-carousel">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</body>
</html>

Show text from alt under a Img on click

I want to make a function which can show the alt of an image.
I'm using bootstrap and made a function which displays an image when I click on the thumbnail.
But I want it also to print or show the alt below the image when I click on the thumbnail.
I'll try my best but if you guys can help me out, I'd be really grateful!
Here is my code:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
//imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
.expandedImg .img {
max-width: 150px;
}
.thumbnailContainer {
overflow-y: none;
width: 180px;
height: 40vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<!--Thumbnail START-->
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);">
</div>
<!--Thumbnail END-->
</div>
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG">
<div>
<!--here the caption/text below the image shown after a click-->
</div>
</div>
Thanks in advance for you guys!

I was actually able to create it without using the id - since you're passing "this" to your function, all you need to do is create a new element and do img.parentNode.insertBefore(newNode, img.nextSibling);. That being said, it might be better to add an id instead. Here's a working example:
function showAlt(imgNode) {
const altNode = document.createElement("p");
altNode.innerHTML = imgNode.alt;
imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section class="container">
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="showAlt(this);">
</div>
</section>
</body>
</html>
and in case you want to play with the code a bit, here's a JSFiddle - https://jsfiddle.net/AJax201222/6dz18hwa/13/

As imvain2 suggested in the comments, you just need to add the id to the div and uncomment the imgText.innerHTML = imgs.alt; line and it should work.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
.expandedImg .img {
max-width: 150px;
}
.thumbnailContainer {
overflow-y: none;
width: 180px;
height: 40vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<!--Thumbnail START-->
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE"
class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;"
onclick="myFunction(this);">
</div>
<!--Thumbnail END-->
</div>
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize"> <!-- <== change this part to show the imgtext below the expandedImg -->
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG">
<div id="imgtext">
<!--here the caption/text below the image shown after a click-->
</div>
</div>
</div>
</div>

Add multiple thumbnails in figure

I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.

One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Image slide left not working

I want to slide my image to left when click on the right arrow of the image slider. I cant apply the slide left animation.When click right arrow current image hide and next image is showing but not slide animation is happening
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none
}
#image-content img.active{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
I just want to slide it to left side.Currently working fine except animation.Help Please

There's another way for it. Use bootstrap:
div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
/* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
/* selector to edit images */
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
it's working like a charm

css seems to work, i think there's an issue on youor js.
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
transition: 1s;
}
#image-content img.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
The best option to slide is moving content from out of page to in and the opposite for sliding-out object.

using resizable function on div moves the other division to next line

I am very very new to javascript/Html/CSS and have to use it to add small functionality in one of the existing websites. I am planning to have a resizable division so that if we have a bigger image/drawing on the left side of division it can be resized. The right side of the division is text.
I have used resizable() function and when I resize the first division the other division goes into a new line. I am not sure how to fix this. When the page loads, I need the background division to have 50% width and textfield to have 47.5%. But, on resizing background division - the textfield should auto resize it's width.
Edit: fixed the html typo issue.
Code: https://jsfiddle.net/yguw/t3e9xgbg/
Please suggest as to how I fix this problem.
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="../css/test.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.11.4.min.css">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#background").resizable();
});
</script>
</head>
<body>
<!-- Code block start - NT -->
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
<!--<script type="text/javascript" src="../js/testYG.js"></script> -->
</body>
<div class="mainDiv">
<div id="resizable" class="background" id="background"></div>
<div id="resizable" class="textField" id="textDivField">
</div>
</div>
</html>

instead float, you may use display: table or flex to draw a row.
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display:table;
width:100%;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width:50%;
display:table-cell;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
display:table-cell;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
$(function() {
$("#background").resizable();
});
.mainDiv {
height: relative;
display: flex;
}
:root {
background: 900px;
position: relative;
}
#background {
background-color: rgb(255, 200, 240);
height: 50vh;
width: 50%;
margin: 0;
}
#textField {
background-color: rgb(240, 240, 200);
position: relative;
flex: 1;
padding: 1%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="topbar">
<div class="topbarleft">
<div class="searchbarleft">
<p>testing</p>
</div>
<div class="searchbarright">
<input type="text" id="box" name="fname" size="50">
</div>
</div>
<div class="topbarright">
<div class="topbarleft">
</div>
<div class="topbarright">
<a href='/test/r/signout' style='color:white;'>SignOut</a>
</div>
</div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>

Categories

Resources