We Keep Coding

Insert div on next line when element is clicked

I am trying to make something similar to what you find in google images. When a picture is clicked, a div with the image appears on the next line over the other images that is under the clicked one.
I have a set of divs with float:left and position:relative. They have different widths. When i click on a div i want a new full width div to appear on the next line. The divs under the clicked one should be bushed down under the full width one.
I tried to do this by looping through the divs and compare the position of the divs to the clicked one like this:
$(".Wrapper").on("click", ".testDivs", function () {
var thisTop = $(this).position().top;
$(".testDivs").each(function(i, obj) {
var otherTop = $(obj).position().top;
if(thisTop < otherTop){
$(".fullWidthDiv").insertBefore(obj);
return;
}
});
});
This doesn't work and I don't really know how I should do this. Any tips/solutions?

This requires a lot of information to explain. So I'd rather suggest reading a blog post on this topic.Hope this will help you.
https://www.sitepoint.com/recreating-google-images-search-layout-css/

Here is a way to achieve that. It will not keep scroll position but that would be another easy fix.
<div class="wrapper">
<div class="row1 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
<div class="row2 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
<div class="row3 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
</div>
I only applied some styling ti increase visibility of the changes.
.img {
width: 32%;
height: 100px;
background-color: #ccc;
display: inline-block;
}
.row {
border: 1px solid green
}
.big-img {
height: 300px;
}
And finally the JS:
$('.img').click(function() {
var expandedImg = '<div class="big-img"></div>';
$('.big-img').remove();
$(this).parent().append(expandedImg);
})
Fiddle: https://jsfiddle.net/a5fm2dup/

why don't you just do
$(".Wrapper").on("click", ".testDivs", function () {
$(this).after($(".fullWidthDiv"));
});

Ended up making a solution based on my initial code. This doesn't require all the CSS the other solution that was postet suggested. Adding rows dynamically was also suggested, but this became very complicated when making it responsive to window resizing. Feel free to reply if you have any comments on this
function positionDiv() {
var checker = false;
var n;
var thisTop = clickedElement.position().top;
$(".testDivs").each(function(i, obj) {
var otherTop = $(obj).position().top;
if(thisTop < otherTop){
$(".testDivs:eq(" + (i-1) + ")").after($(".fullWidthDiv"));
checker = true;
return false;
}
n = i;
});
if (!checker) {
$(".testDivs:eq(" + n + ")").after($(".fullWidthDiv"));
}
}
var clickChecker = null;
$(".wrapper").on("click", ".testDivs", function () {
if (clickChecker === this){
$(".fullWidthDiv").hide();
clickChecker = null;
} else {
$(".fullWidthDiv").show();
clickChecker = this;
}
clickedElement = $(this);
positionDiv();
});
window.onresize = function(event) {
if( clickedElement != null) {
$(".tagTextWrapper").hide();
positionDiv();
$(".tagTextWrapper").show();
}
}

Get input value and generate multiple textarea and set value there

I have a DOM like this, when i fill the input field and click the button i need to create a textarea element and and stored the input value there.
if i click multiple times create multiple textarea and multiple ID's, How can i do this please check my code, Best answers must be appreciated
$('#note').on('click', function(){
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
});
.full-width.note_cover {
float: left;
margin-bottom:15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div><!-- #content_bag -->
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>

Your code is working fine, just put storedNoteVal in text-area, and input won't generate any text-area if its blank.
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
var count_id = 1;
var noteCov = $('.note_cover');
if(storedNoteVal){
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>');
//$(noteCov).find('textarea').val(storedNoteVal);
$(noteCov).each(function(index, element) {
$(this).attr('id', 'noteId' + count_id);
count_id++;
});
}
});
.full-width.note_cover {
float: left;
margin-bottom: 15px;
}
.note_cover textarea {
height: auto !important;
height: 45px !important;
resize: none;
width: 100%;
/*border:none;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
</div>
<!-- #content_bag -->
<div>
<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>
</div>

Building on Abhinshek answer -
Your code actually reassign id's to the textareas, since you loop through all the elements after prepending them.
You could define count_id as a window variable (outside the click function) and then just use it.
Also, you don't need to wrap noteCov with $() since $('.note_cover') returns a jQuery objects array
var count_id = 1;
$('#note').on('click', function() {
var storedNoteVal = $('#enterVal').val();
$('#content_bag').prepend('<div class="full-width note_cover" id="noteId_'+count_id+'"><textarea>' + storedNoteVal + '</textarea></div>');
count_id++;
});
This way each textarea gets it's own unique id that doesn't change

Show more Images when click show more

Hi I'm trying to make a functionality where if the customer clicks the show more, 3 images will appear, and if it was clicked one more time another 3 images will appear and so fourth. I'm having trouble on Javascript, just wondering if someone can help me see the error.
my fiddle here
$(document).ready(function () {
image_x = $(".handler .col-md-4").size();
x=1;
$('.handler .col-md-4:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= image_x) ? x+1 : image_x;
$('.handler .col-md-4:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('.handler .col-md-4').not(':lt('+x+')').hide();
});
});
.col-md-4 {
width: 100%;
text-align: center;
}
.col-md-6 {
width: 100%;
text-align: center;
}
#loadmore {
border: 1px solid;
padding: 20px;
}
#loadless {
border: 1px solid;
padding: 20px;
}
<div class="handler">
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
</div>
<br />
<br />
<div class="col-md-6">
show more image
show more image
</div>
<br />
<br />
<br />
<br />
<br />
<br />

Your code required some minor fixes. The id used in html and jquery were not in coherence. I have updated displays to be modified by toggling css display.
$(document).ready(function () {
x=1;
$('.handler li:lt('+x+')').css('display','block');
$('.handler li').not(':lt('+x+')').css('display','none');
});
$('#loadMore').click(function () {
image_x = $(".handler li").size();
x= (x+1 <= image_x) ? x+1 : image_x;
$('.handler li:lt('+x+')').css('display','block');
});
$('#loadLess').click(function () {
image_x = $(".handler li").size();
x=(x-1<=0) ? 3 : x-1;
$('.handler li').not(':lt('+x+')').css('display','none');
});
Refer this: http://fiddle.jshell.net/n8f983cb/7/

See the fiddle
A number of problems in your code, from logic issues to classname typos.
So, i rewrote your code a little bit. Check if this attends your need.
Thank you (:

There were a few mistakes in your code such as using the wrong id's as well as other things. But, instead of detailing the minor typos and syntax errors that won't really be helpful knowledge for anyone in the future, I'm going to demonstrate how I would approach the problem.
Create an object which holds a function for each action.
showMore should increment the counter, then show the appropriate items
showLess should decrement the counter, then hide the appropriate items
Create one function that hides or shows items based on the counter and hides or shows each action based on whether it can be used or not. Call this function at the end of each action defined previously.
Assign a delegated event listener to the parent of the controls, lookup the correct function based on the id and execute it. I added a fallback in case for some reason the code is changed and it can no longer find the correct function.
I've reduced the HTML and used placeholder images to reduce the size of the demo below, but it will work with your HTML as well.
$(document).ready(function() {
var images = $(".handler > div").hide(), x = 1;
var showMore = $('#showMore');
var showLess = $('#showLess');
var funcs = {
'showMore': function() { ++x; show(); },
'showLess': function() { --x; show(); }
}
$('.controls').on('click', 'a', function(e){
return (funcs[e.target.id] || function(){})(), false;
});
function show() {
images.hide().filter(function(i){ return i < (x * 3); }).show();
showMore.show().filter(function(){ return !images.is(':hidden'); }).hide();
showLess.show().filter(function(){ return x === 1; }).hide();
}
show();
});
.handler { width: 600px; } .handler > div { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="handler"><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div></div><br /><div class="col-md-6 controls">show more images show less images</div>

image preview in fancybox and responsive filemanager not work (Empty string passed to getElementById().)

I work with responsivefilemanager and fancybox for upload and add images_url and image preview gallery.when i click image in filemanager fancybox close and add preview to image box(NO IMAGE) BUT in fancybox 2.1.5 when i click in image fancybox not closed and not show image preview. my code work with fancybox 1.3.4 but with last version 2.1.5 not worked.
JS:
$(document).ready(function() {
$(function() {
$('.thumbcheck').tooltip();
$('#btn-sub').click(function() {
$('#name').removeClass('has-error');
$('#err_name').hide();
name= $('#gallery_name').val();
if(name.length==0){
$('#name').addClass("has-error");
$('#err_name').show();
}
else
$("#form-gallery").submit();
});
$('#append').on('click', '.btn-remove', function() {
var parent = $(this).closest('.form-group');
var input = parent.find('.width100').next('input').val();
if($('input[name=cover]').val()==input ){
$('input[name=cover]').val('');
}
parent.remove();
});
$("#checkall").on('ifChecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("check");
$('#action-box').show();
});
$("#checkall").on('ifUnchecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("uncheck");
$('#action-box').hide();
});
$(".checkbox").on('ifChecked', function(event) {
$('#action-box').show();
});
$(".checkbox").on('ifUnchecked', function(event) {
var length = $(".table-striped input[type='checkbox']:checked").length;
if ($(".table-striped input[type='checkbox']:checked").length === 0) {
$('#action-box').hide();
$("#selectAll").iCheck("uncheck");
}
});
$('.img-thumb').next().change(function() {
$('.img-thumb').attr('src', $('.img-thumb').next().val())
});
$('#btnAdd').click(function() {
var form_group = $('#form-group').html();
var new_id = rand();
var baseurl = $('#baseurl').html();
$('#upload').clone().attr('id', new_id);
$('#upload-img').clone().attr('id', 'img-' + new_id);
$('.thumbcheck').clone().attr('data-id',new_id);
$('#append').append(form_group);
$('#upload').attr('id', new_id);
$('#upload-img').attr('id', 'img-' + new_id);
$('.thumbcheck').eq(-2).attr('data-id',new_id);
$('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
$('#' + new_id).next('a').next('a').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function() {
var imgurl = $('#'+new_id).val();
var check = $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
console.log(check);
console.log(check.attr('class'));
if(check.attr('class')=='fa icon-circle-blank'){
console.log('sd');
$('#thumb').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + new_id).attr('src', ''+imgurl);
}
}
});
$('.thumbcheck').tooltip();
});
$(document).on('click','.thumbcheck',function(){
var value = $('#'+$(this).data('id')).val();
if($(this).find('i').attr('class')=='fa icon-circle'){
$(document).find('.thumbcheck i').attr('class','fa icon-circle');
$(this).find('i').attr('class','fa icon-circle-blank');
$('input[name=cover]').val(value);
}
else {
return false;
}
});
$('.boxGetFile').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function(link, index) {
var id = $(link).data('id');
var imgurl = $('#'+id).val();
var check = $(document).find('.thumbcheck[data-id='+id+']').find('i');
if(check.attr('class')=='fa fa-circle'){
$('input[name=cover]').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + id).attr('src', ''+imgurl);
}
}
});
});
function rand() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 8; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
});
HTML:
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
</div>
</div>
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style="display: none;" id='form-group'>
<div class="form-group custom-cols">
<div class="col-sm-12 control-label">
<div class="col-sm-2">
<div class="input-append">
<div class='col-sm-10 no-pad'><img src="data:image/png;base64,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" id='upload-img' class="width100" />
<input name="image_url[]" id="upload" type="text" value="" style='display: none'>
<a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id=""><i class="fa fa-circle-o"></i></a>
<a class="col-sm-8 no-pad boxGetFile"><h6>select image</h6></a>
</div>
</div>
</div>
<div class="col-sm-7 padding-left-8">
<input type="text" name='image_title[]' class="form-control" placeholder='Image title' />
<input type="text" name='image_alt[]' class="form-control" placeholder='Image alt' />
</div>
<div class="col-sm-1">
</div>
How do can i fix my problem ?
Worked Demo with fancybox 1.3.4 HERE
NOTWorked Demo with fancybox 2.1.5 HERE
NOTE: in demo please click in add image
In each click image I see this error in firebug console:

I think the elements provided in the question are not enough to provide an accurate answer but for the bounty I will guess ;)
After a quick look at the source code of your (none working) DEMO using fancybox v2.1.5, I found some issues you may need to fix in in order to have a working page :
1). You don't have a proper DOCTYPE (I meant, not DOCTYPE at all)
2). You have a stray </div> closing tag (line 179) just before the <div id="baseurl">
3). You have a stray <! opening (sort of) conditional comment (line 204)
4). Yo DON'T have a closing </html> tag
5). The base url issue:
You have this html line
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
Notice at the end of the line &field_id=<</div> : the extra < I think is a typo, isn't it?.
Then you have this variable:
var baseurl = $('#baseurl').html();
... which actually returns :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<
If you run that url directly in your browser (out of fancybox) it does return the same js error while selecting the image in fancybox. What I think is the escaped html entities are somehow messing with the functionality of responsive file manager.
For instance, if you open the url without escaping the html entities (in a new tab/window) like :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl
...(excluding the < typo), the only error is when triggering the $.fancybox.close() method, which it does make sense.
I would recommend you to do either :
var baseurl = $("#baseurl").text(); // don't escape html entities
or set the value in a data attribute for a cleaner code like
<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>
... then the variable
var baseurl = $("#baseurl").data("base");

How to scroll the div content using jquery or javascript?

I want to scroll the div, containing the text, to the top when I mouseover the up arrow and stop when the mouse leaves the focus. Same for the down arrow.
I tried using jquery but it fails.
please visit: http://jsfiddle.net/shantanubhaware/38WMF/12/
Here is Html code
<div class="container">
<div class="news event">
<div class="up arrow nav"></div>
<div class="down arrow nav"></div>
<p class="content items"> <span class="p">text1
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text2
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text3
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text4</span>
</p>
</div>
</div>
I use the following jquery
$('.up').mouseover(function () {
scrollToTop();
});
$('.down').mouseover(function () {
scrollToBottom();
});
function scrollToTop() {
var cur = $('.content').scrollTop();
while (cur > 0) {
cur = parseInt(cur) - 50;
$('.content').animate({
scrollTop: cur
}, 800);
}
}
function scrollToBottom() {
var cur = $('.content').scrollTop();
var height = $('.p').height();
while (cur < height) {
cur = parseInt(cur) + 50;
$('.content').animate({
scrollTop: cur
}, 800);
}
}
tell me if i am wrong anywhere or if i want to use any other technique.
Thanks for your support.

you need to stop the ongoing animation before starting a new one, otherwise it will finish the ongoing animation first and only then will start the new one.
its done by calling .stop() first.
also you forgot to bind on mouse leave events.
heres yours fixed fiddle:
http://jsfiddle.net/TheBanana/38WMF/14/