I have a problem with Jonas von Andrian's jQuery Sortable plugin. When I try to move items, they first fly out of the .row and only after that I can move it normally.
What am I doing wrong?
$(".items-container").sortable({
containerSelector: ".items-container",
itemSelector: ".item",
containerPath: "> .row"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
View on JS Bin
I suggest using itemPath rather than containerPath, based on the "Sort Tables" example.
The documentation is a bit murky to me. It says that itemPath is "The exact css path between the item and its subcontainers." But it seems to me to be the CSS path between the container and its items, which is what containerPath is supposed to define.
I have also added the placeholder option in order to apply Bootstrap styles to the placeholder element.
$(".items-container").sortable({
containerSelector: ".items-container",
itemPath: "> .row",
itemSelector: ".item",
placeholder: '<div class="col-xs-4 panel placeholder"/>'
});
.row .dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
Related
Example single service 1st tag redirects to #xx and 2nd one redirects to #yy both on another subpage of my website.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $offert = ["xx", "yy"];
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html';
})});
These things are meant to work without script engine assistance
Please use the conventional HTML Anchors, such as <A ID="sectionID" and utilize fractal URL's on a link such as <A HREF="oferta/index.html#sectionID".. to make a Hyper-Jump.
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service lk1" data-anchor="xx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service lk2" data-anchor="yy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli</p>
</div>
</div>
</div>
const $clicken = $('.single-service');
$($clicken).click(function(){
window.location='oferta/index.html#'+$(this).data('anchor');
})});
just add # and id of a div you want to go to ie.
window.location='oferta/index.html#id';
I am developing an HTML template, I do need slick to handle a testimonials carousel, but even if I point the div ID with slick nothing happen.
I got no errors in the console.
This is the code I am using:
---- HTML ----
<section id="testimonials">
<h2 class="text-center text-uppercase margin-bottom-3">testimonials</h2>
<div class="row is-full">
<div class="columns large-8 medium-8 hide-for-small-only nopadding">
<img src="assets/img/testimonials-bg.jpg" alt="placeholder"/>
</div>
<div class="large-4 medium-4 small-12 bg-odd rel" id="tSlider">
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
</div>
</div>
<div class="divider"></div>
---- JS ----
$(document).on(ready, function(){
$('#tSlider').slick({
infinite: true,
autoPlay: true,
dots: true,
autoPlaySpeed: 3500
});
});
I have a bootstrap panel(chat-area), and I'm showing chat messages in there. So, once a user clicks on the Send button, the message should be shown in the chat-area.
This is my html code for the chat-area.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Tinychat</a>
</div>
<form class="navbar-form navbar-right" action="" method="post">
<div class="form-group">
<span>Hi, </span>
<input class="form-control" type="text" name="username" value="" placeholder="Enter any username">
</div>
<button type="submit" name="submit" class="btn btn-primary">Use</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="panel panel-primary">
<header class="panel-heading">
<p class="panel-title">Chat messages</p>
</header>
<div class="panel-body fixed-panel" id="chat-area">
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-success">
<header class="panel-heading">
<p class="panel-title">User list</p>
</header>
<div class="panel-body fixed-panel">
<ul class="list-unstyled user-list">
<li>tom</li>
<li>harry</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9">
<form class="" action="" method="post">
<div class="form-group">
<textarea class="form-control" id="message" rows="2" style="resize:none"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary pull-right">Send</button>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="apps.js"></script>
</body>
this is my jquery code.
var main = function() {
$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});
$("#message").keyup(function() {
var messageLength = $("#message").val().length;
if(messageLength <= 0)
$("#send").addClass("disabled");
else {
$("#send").removeClass("disabled");
}
});
$("#send").addClass("disabled");
}
$(document).ready(main);
send is the button, and message is the textarea.
The problem is, I'm not able to append this addMessage to the chat-area. Also, when I debug in chrome, I see that the section is appended, but as soon as the function returns back, that section disappears.
Please help.
Thanks!!
just add this
$('#send').on('click', function(event){
event.preventDefault();
//rest of the code
});
or
$("#send").click(function(event) {
event.preventDefault();
//rest of the code
});
to prevent the form to submit or a hyperlink to navigate.
This gives you also finer control when you want to ajax stuff back to your server back end
It's working for me in here : JSFiddle
This is the html code :
<div class="panel-body fixed-panel" id="chat-area">
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-left">
<p class="message-heading">harry</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="row">
<div class="chat-message chat-right pull-right">
<p class="message-heading">tom</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
<input type="text" id="message"><button id="send">Send</button>
And this is the jquery one:
$("#send").click(function() {
var message = $("#message").val();
var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
$("#chat-area").append(addMessage);
});
But that'll be only for the client-side , so as soon as you refresh your page, they'll be gone. So you should look for a server side solution to build your chatting application.
I try to produce the same effect of the browser zoom to a div in my page,
This div contains several thumbnails with a float left on each thumbnail,
My zoom works very well on chrome and opera exactly as I want, but on firefox and IE : if zoom out it makes white space and if zoom in it creates scrolls.
Can anyone help me please.
$('#zoom-in').click(function() {
updateZoom(0.1);
});
$('#zoom-out').click(function() {
updateZoom(-0.1);
});
zoomLevel = 1;
var updateZoom = function(zoom) {
zoomLevel += zoom;
$('.zoom').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')','-ms-transform': 'scale(' + zoomLevel + ')', 'transform-origin': 'top left' });
}
.panel{
float:left;
margin-right:20px;
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary" id="zoom-in">zoom in</button>
<button type="button" class="btn btn-primary" id="zoom-out">zoom out</button>
</div>
</div>
<hr>
<div class="row zoom" style="margin-top:20px;">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
<div class="panel panel-default">
<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
</div>
</div>
</div>
I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>