Here is my dilemma i have two views which work fine on toggle I have the Isotope and Masonry view, this works fine the challenge was to have the masonry view re size certain images depending on the view port, which I did using the below code.
$(function(){
var $container = $('#container');
// add randomize the size of images on the selected class//
$container.find('.element').each(function(){
var $this = $(this),
number = parseInt( $this.find('.number').text(), 10);
if (number % 1 === 0 ){$this.addClass('width2');}
if (window.matchMedia("(max-width: 599px)").matches) {
if ( number % 5 === 3) {
$this.addClass('height2');}
}
if (window.matchMedia("(min-width: 600px) and (max-width:1023px)").matches) {
if ( number %12 % 5 === 2) {
$this.addClass('height2');}
}
if (window.matchMedia("(min-width: 1024px)").matches) {
if ( number %10 % 10 === 5) {
$this.addClass('height2');}
}
});
I make this work by assigning a number to an element using the below
var $l = document.getElementsByClassName("number");
for(i=0; i < 40; i++){ $l[i].innerHTML = i + 1;}
what this does it ads a number to the class "number", I use the top code to return that number and I use modulus to assign a class to the returned numbers.
All of this works fine, if I open a browser window at the given size in my code the class is added to the assigned number range, now my issue is I have to make this work on window re-size which is where I am stuck, is there an easier way to accomplish what I am trying to do or any tips will be greatly appreciated.
here is a bit of the HTML code
<div id="container">
<div class="element item audio hd phone">
<p class="number"></p>
<div class="element_holder bar">
<div class="thumb">
<div class="p-darkblue status opacity">
<i class="fa fa-comments"></i> Available
<div class="modelfeatures">
<span><i class="fa fa-volume-up"></i></span>
<span data-cat="hd" class="hd">HD</span>
<span><i class="fa fa-mobile"></i></span>
</div>
</div>
<!-- hover over effect on masonary view -->
<div class="overlay1">
<div class="p-darkblue col-lg-12 opacity">
<i class="fa fa-comments"></i>Available
<div class="modelfeatures">
<span><i class="fa fa-volume-up"></i></span>
<span class="hd">HD</span>
<span><i class="fa fa-mobile"></i></span>
</div>
<div class="model_name">kinkykat</div>
<div class="rating rating_margin">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-full"></i>
</div>
</div>
</div>
<!-- end of overlay -->
<img class="backdrop" src="image source" alt="Kikykat - Available">
<div class="flame">
<div class="flame1"><i class="fa fa-fire"></i></div>
<div class="flame2"><i class="fa fa-firefox"></i></div>
<div class="flame3"><i class="fa fa-fire"></i></div>
</div>
</div>
</div>
after reading a few doc's regarding isotop found the below solution
// init Isotope
$(window).ready(function(){
var $element_holder = $('.element_holder');
$element_holder.hide();
var $container = $( '.element' );
$container.imagesLoaded(function(){
$element_holder.fadeIn();
$container.isotope({
itemSelector: '.element_holder',
layoutMode: 'fitRows',
fitRows: {
gutter: 1,
columnwidth: '.element_holder',
}
});
});
the issue was the gutter which was not set. :('
Related
I had created a simple chat system using jQuery and ajax, I want the scroll bar to be in the bottom of div in two occasion that is :
_first time loading page.
_New messages has arrived.
the problem is the scroll bar is auto scrolling down all the time.
this is my html and javascript code
function load (){
$.post("action.php",{
Action : "get"
},function(resp){
var scrollTop = $('#shoot').scrollTop();
var clientheight = $('#shoot').height();
var scrollTop = parseInt(scrollTop)+320;
var scrollHeight = $('#shoot').prop("scrollHeight");
$('#shoot ').html(resp);
if (scrollTop < scrollHeight ) {
}else {
$('#shoot').scrollTop() = $('#shoot').prop("scrollHeight");
}
});
}
<div class="row justify-content-center h-100">
<div class="col-md-8 col-xl-6 chat">
<div class="card">
<div class="card-header msg_head">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Chat with Khalid</span>
<p>1767 Messages</p>
</div>
<div class="video_cam">
<span><i class="fas fa-video"></i></span>
<span><i class="fas fa-phone"></i></span>
</div>
</div>
<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
<div class="action_menu">
<ul>
<li><i class="fas fa-user-circle"></i> View profile</li>
<li><i class="fas fa-users"></i> Add to close friends</li>
<li><i class="fas fa-plus"></i> Add to group</li>
<li><i class="fas fa-ban"></i> Block</li>
</ul>
</div>
</div>
<div id="shoot" class="card-body msg_card_body">
<div class="d-flex justify-content-start mb-4">
<div class="msg_cotainer">
Hi, how are you samim?
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Hi Khalid i am good tnx how about you?
</div>
</div>
</div>
Can you first correct this line:
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") );
/* $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight"); */
and then retry? Because the correct way to change scrollTop position is by passing a parameter to the jQuery function .scrollTop(value) - docs at api.jquery.com
Also, you said "scroll bar is auto scrolling down all the time" - but it is not clear when / how often do you call the load() function. Because, from your code, it seems that after each call, no matter the response, you run a scroll action. If you want to make an auto-scroll only at new messages - then you should for check that. For example, make "action.php" return false if no new messages, and in the load function, don't do any scroll if response is false.
For those who used $("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000); this keeps the scroll bar scrolling down all the time , so you must change it to
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") ); , this is the right way to get to new position of the scroll bar without forcing it to stay at specific position.
I want to set increment id whenever i add a new column.
this is how i am dynamically creating new element in a row.
<script>
$(".imgAdd").click(function(){
$(this).closest(".row").find('.imgAdd').before('<div class="col-sm-4 imgUp"><input id="gallery1" class="uploadFile tourbanner"><i class="fa fa-times del"></i></div>');
});
$(document).on("click", "i.del" , function() {
$(this).parent().remove();
});
</script>
this is html part where i am generating the div
<div class="row" id="container">
<!--dynamically added column here -->
<i class="fa fa-plus imgAdd"></i>
</div>
what i need is, when i add new column, it should set increment variable +1, then it should output like.
<div class="row" id="container">
<div class="col-sm-4 imgUp"><input id="gallery1" class="uploadFile tourbanner"><i class="fa fa-times del"></i></div>
<div class="col-sm-4 imgUp"><input id="gallery2" class="uploadFile tourbanner"><i class="fa fa-times del"></i></div>
<div class="col-sm-4 imgUp"><input id="gallery3" class="uploadFile tourbanner"><i class="fa fa-times del"></i></div>
<i class="fa fa-plus imgAdd"></i>
</div>
You can declare a variable which will have count value and everytime increment it by 1 whenever new inputs are added and when a input get delete you can use each loop to reset the ids of the inputs.
Demo Code :
var counter = 1;//declare count
$(".imgAdd").click(function(){
//add id=galery+counter
$(this).closest(".row").find('.imgAdd').before('<div class="col-sm-4 imgUp"><input id="gallery'+counter+'" class="uploadFile tourbanner"><i class="fa fa-times del">DELETE</i></div>');
counter++;//increment
});
$(document).on("click", "i.del" , function() {
$(this).parent().remove();
counter--;//decremnt count
reset();//reseting ids
});
function reset() {
counter = 1;//start count from 1
//loop
$(".tourbanner").each(function() {
$(this).attr('id','gallery'+counter);//change ids
counter++;//increment
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="container">
<i class="fa fa-plus imgAdd">ADD</i>
</div>
After you complete the change in the contents of #container, use a .each() function to reassign the ids:
$i = 0;
$("#container div").each(function() {
$(this).prop("id","gallery"+ ++$i);
});
I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
I have this BS navbar that you can collapse, and I want it to save the state when I change page or refresh the current page.
home.php
<!-- Side Navbar -->
<nav class="side-navbar">
<div class="side-navbar-wrapper">
<div class="sidenav-header d-flex align-items-center justify-content-center">
<div class="sidenav-header-inner text-center"><img src="img/marcus_avatar.png" alt="person" class="img-fluid rounded-circle">
<h2 class="h5 text-uppercase"><?php echo $_COOKIE['userName']; ?></h2><span class="text-uppercase">Web Admin</span>
</div>
<div class="sidenav-header-logo"> <strong>S</strong><strong class="text-primary">F</strong></div>
</div>
<div class="main-menu">
<ul id="side-main-menu" class="side-menu list-unstyled">
<li class="active"> <i class="fa fa-home"></i><span>Home</span></li>
<li> <i class="fa fa-users"></i><span>Users</span></li>
<li> <i class="fa fa-upload"></i><span>Upload</span></li>
<li><i class="fa fa-file"></i><span>My Files</span></li>
</ul>
</div>
</div>
</nav>
jsfile.js
$(".side-navbar").on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
$.cookie(active, "1");
});
$(".side-navbar").on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
$.removeCookie(active);
});
$(document).ready(function(){
var panels=$.cookie(); //get all cookies
for (var panel in panels){ //<-- panel is the name of the cookie
if ($("#"+panel).hasClass('shrink')) // check if this is a panel
{
$("#"+panel).collapse("show");
}
}
});
I want it to work like this: http://jsfiddle.net/03u0bfst/3/ but I just can't get it to work for the life of me!
I'm using JQuery-UI draggable to move an element around. The things is when I drag an element to the right, the underlying list of elements gets dragged to the left!
Here is the DOM of the rendered list:
<div id="result" class="list-group">
<div class="list-group" data-reactid=".0">
<a id="sink" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1etg">
<h4 class="list-group-item-heading" data-reactid=".0.$1etg.$14dd">
<i class="fa fa-star" data-reactid=".0.$1etg.$14dd.$1crq">Spout</i>
</h4>
<p class="list-group-item-text" name="Spout" data-reactid=".0.$1etg.$24yv">Data source</p>
</a>
<a id="forex" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1mfb">
<h4 class="list-group-item-heading" data-reactid=".0.$1mfb.$1epm">
<i class="fa fa-dollar" data-reactid=".0.$1mfb.$1epm.$1b42">Composable type</i>
</h4>
<p class="list-group-item-text" name="Composable type" data-reactid=".0.$1mfb.$210d">Composable type</p>
</a>
<a id="read_portfolio" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$k4i">
<h4 class="list-group-item-heading" data-reactid=".0.$k4i.$a1i">
<i class="fa fa-search" data-reactid=".0.$k4i.$a1i.$mqj">Read portfolio</i>
</h4>
<p class="list-group-item-text" name="Read portfolio" data-reactid=".0.$k4i.$1pqw">Read a portfolio</p>
</a>
<a id="constituents_valuation" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$11ub">
<h4 class="list-group-item-heading" data-reactid=".0.$11ub.$1r31">
<i class="fa fa-cogs" data-reactid=".0.$11ub.$1r31.$1omt">Constituents valuation</i>
</h4>
<p class="list-group-item-text" name="Constituents valuation" data-reactid=".0.$11ub.$bca">Compute the valuation of constituents</p>
</a>
<a id="get_constituents" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$n2d">
<h4 class="list-group-item-heading" data-reactid=".0.$n2d.$jho">
<i class="fa fa-eye" data-reactid=".0.$n2d.$jho.$nn1">Portfolio constituents</i>
</h4>
<p class="list-group-item-text" name="Portfolio constituents" data-reactid=".0.$n2d.$1870">Get the constituents of a portfolio</p>
</a>
</div>
</div>
Here is how the plugin is used:
$(".list-group-item").draggable({
cursor: "move",
cursorAt: { top: -10, left: -10 },
helper: function (event) {
var coords = getCrossBrowserElementCoords(event);
var id = event.currentTarget.getAttribute('id');
// draw a temporary element
dragged = $.extend({}, $scope.components[id]);
dragged['id'] = id + '-' + randomKey();
dragged['x'] = coords.x;
dragged['y'] = coords.y;
dragged['selected'] = true;
$rootScope.$broadcast(Config.events.add_node, dragged);
return $("<div class='fa fa-" + dragged.icon + "' style='font-size:xx-large'></div>");
},
// Triggerent on mouse move while holding the item
drag: function(event, element) {
//TODO trigger add_node event
var coords = getCrossBrowserElementCoords(event);
dragged['x'] = coords.x;
dragged['y'] = coords.y;
$rootScope.$broadcast(Config.events.update_node, dragged);
},
// Triggered once a the mouse is released
stop: function(event, element) {
var coords = getCrossBrowserElementCoords(event);
// if within the slider then remove the temporary node
var width = parseInt($("#sidebar-wrapper").css('width'), 10);
if(coords.x < width) {
$rootScope.$broadcast(Config.events.remove_node, dragged);
}
dragged = null;
}
});
The rendered clone is appended to the end of list-group.
Below is how it looks like, Any pointer to the issue will be welcome.
maybe it has to do with Cursor At? I think when you first start the drag, Jquery UI will move the helper element to the specified location in Cursor At, creating the illusion of it jumping left?
I fixed the problem by using appendTo attribute of draggable to attach the element to the #result parent, and then controlling when it is hidden or shown in drag function.