We Keep Coding

Scrollbar doesn't appear when adding <li> dynamically by jquery

I have ul list in div and if I set div height and overflow-y
It becomes scrollable.
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>
</ul>
</div>
However when I add items by append of jquery.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>Add this few times<br>
tweet<br>
tweet<br>
test<br>
</div>
</div>
</li>`);
There never appears scroll bar.
Is this the way to make scrollbar for dynamically added <li> ?
How should I solve this??

There were a few syntax errors in your code.
You were also missing the closing quote in $("#mainul") though Michelangelo edited it.
This works below.
$("#mainul").append(`
<li>
<div class="card">
<div class="card-body">
<p>
Add this few times<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner" style="height:150px;overflow-y:scroll;font-size:18px;">
<ul id="mainul">
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet frist<br>
tweet<br>
tweet<br>
test<p>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-body">
<p>This is the tweet that's second<br>
tweet<br>
tweet<br>
test<br>
</p>
</div>
</div>
</li>
</ul>
</div>

fancybox two images shown at the same window

I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>

So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).

scrolling up set of pictures up and down on hover function

I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>

just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});

Make multiple text passages take up same space?

I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
(source: iforce.co.nz)
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.
The HTML is:
<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
<div class="catItemHeader">
<h3 class="catItemTitle">
Wairamarama-Onewhero Seal Extension
</h3>
</div>
<div class="catItemBody">
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
<img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<div class="catItemIntroText">
<p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="catItemReadMore">
<a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
</div>
<div class="clr"></div>
</div>
This is generated by K2/Joomla! so there isn't much flexibility in it.
This is the page if you want to see it.

You could "fix" the appearance by setting the height of the elements that have variable content to some value that holds the largest. The follwoing CSS does this for the page you linked to:
div.catItemIntroText {
height: 180px;
}
div.catItemHeader h3.catItemTitle {
height: 45px;
}
This only works because you know in advance the height that looks best.
If you were in a position to alter your HTML you could take a fresh approach and use a grid system. Here is an approach that uses Twitter Bootstrap (demo)
<div class="container">
<div class="row">
<div class="span3">
<h2>Wairamarama-Onewhero Seal Extension</h2>
</div>
<div class="span3">
<h2>Te Rapa Pass</h2>
</div>
<div class="span3">
<h2>Stockton Mine</h2>
</div>
<div class="span3">
<h2>State Highway 88 Dunedin Realignment</h2>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3 ReadMore">
<img src="http://placekitten.com/200/300" />
</div>
</div>
<div class="row">
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
</div>
</div>
By putting each row (of text, images and buttons) on it's own <div.row> the spill over is handled automatically.

How to make slides change automatically on slideshow

I have added a Jquery slider (called SudoSlider) to my website, with 'previous' and 'next' buttons that allow users to advance to the next slide, or go back one. I would, however, like to make it so that the slides change automatically.
I have come across questions that are similar to this, but my Javascript is rather limited and so I'm unable to use the codes given to other users.
If anybody can help me achieve this I would be very grateful.
Please see this JSFiddle here for the codes used.
Also, the slider can be seen in action here if the JSFiddle is of no use.
Thanks very much in advance!

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/VN7F8/1/
I just changed the sequence of loading javascript. Below is the complete HTML with javascript included & include external css u have.
HTML Changes:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
</head>
<body>
<div id="container">
<div style="position:relative;">
<div id="slider">
<ul>
<li>
<div style="margin:0 auto;text-align:center;height:300px;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
</div>
</li>
<li>
<div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">
<div class="product_row_1">
<div class="one">
Sennheiser SKP 300 G3
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£296.00</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
Fostex PM8.4.1
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£412.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
Delkin Wingman
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£179.19</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
<div class="product_row_2">
<div class="one">
D|Focus Street Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£332.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
D|Focus Field Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£382.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
D|Focus Austin Rig Bundle
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£499.17</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
​

Try this, it sets the slider to automatically change.
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
});
here is the working link