I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of the cursor.
A simplified layout is as follows:
<div id="wrapper" style="width:WINDOW_WIDTH;">
<div id="page_wrapper" style="width:10000px;">
<div class="widget_page" style="width:WINDOW_WIDTH;">
<div class="widget draggable"></div>
<div class="widget draggable"></div>
<div class="widget draggable"></div>
</div>
<div class="widget_page" style="width:WINDOW_WIDTH;">
<div class="widget draggable"></div>
<div class="widget draggable"></div>
<div class="widget draggable"></div>
</div>
</div>
</div>
is there any way i can disable the page_wrapper from scrolling?
Try to add overflow:hidden; in the css of the page_wrapper.
just add css property "position as a static" on parent div for which you set the scrollbar.
$("selector").css("position","static");
ex.
$('.bottomSentences').draggable({
cursor: 'move',
helper: 'clone',
start: function(e, ui)
{
$(ui.helper).addClass("ui-draggable-helper");
$("#splitSentencesDiv").css("position","static");
}
});
here in ex. splitSentencesDiv is my Div for which i set the scroll. by default its position value is relative set by bootstrap col- class.
Related
I'm using jQuery UI sortable to allow user to drag and drop between two lists and then order the items, but I have an error where when selecting from the first list, the content selected it's not the entire div, just the content on behind the mouse cursor.
Following this, many errors occurs, like I'm not able to order, to move back to the first list and everything can't be undone.
Here's the view code:
<div class="row col-md-12">
<div class="col-md-6">
#foreach (var item in Model.Games.AvailableGamesStats.GameAchievements.Where(f => f.SectionID == null))
{
<div class="connectedSortable" id="achievements" style="margin-top:10px; margin-bottom:10px; z-index:1; cursor:move; height:60px">
<img src="#item.Icon" style="float:left" />
<b>#item.DisplayName</b><br />
<i>#item.Description</i>
#if (item.Difficulty != null)
{
<img src="#item.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</div>
}
</div>
<div class="col-md-6">
<div class="card" style="height:100%; z-index:0">
<div class="card-header text-center" contenteditable="true">Name</div>
<div class="card-body connectedSortable" id="chievo">
</div>
</div>
</div>
and jQuery...
$(function () {
$("#chievo, #achievements").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
The first div items that I'm trying to move, are a collection of image, title and description, but when I try to move, only one item moves, and can't order or undo anything.
I have some code that when a user clicks away from a side-bar the side-bar closes, How do I change it so when a user clicks a link the side-bar also closes and as well as from the side bar
Example - if I was to click the word Home, it would then hide the side-bar.
//hidding side header on click outside header
$body.on('mousedown touchstart click', function(e) {
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
} //sideHeader check
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
attached is the image of the sidebar when opened
I would turn all of your close code into a function like so:
function closeMenu(){
if (!($(e.target).closest('.page_header_side').length) && !($sideHeader.hasClass('header_side_sticked'))) {
$sideHeader.removeClass('active-slide-side-header');
$body.removeClass('active-side-header slide-right');
$body.parent().removeClass('html-active-push-header');
var $toggler = $('.toggle_menu_side');
if (($toggler).hasClass('active')) {
$toggler.removeClass('active');
}
}
});
Then I would put the same handler that you have on the body on the links of the menu. Let's say your menu has an id of menu
So you would have:
$('body', '#menu a').onClick(function(){
closeMenu();
});
This will add the handler to the body as well as all a tags within the menu.
With the given code this is what I have done:
//hidding side header on click outside header
$('.scrollbar-macosx').on('click', function(e) {
//$sideHeader.removeClass('active-slide-side-header');
//$body.removeClass('active-side-header slide-right');
//$body.parent().removeClass('html-active-push-header');
//if you want to keep playing with adding and removing classes them:
//if (($toggler).hasClass('active')) {
$('#elementToHide').fadeOut();
//}
});
//sideHeader check
And them your html:
<header class="page_header_side header_slide header-special header_side_right ds">
<div class="scrollbar-macosx" id="elementToHide">
<div class="side_header_inner">
<p class="text-right mb-0 close-wrapper">×</p>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Home</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">Overview</h3>
</div>
<div class="widget widget_recent_posts">
<h3 class="widget-title">About</h3>
</div>
</div>
</div>
</header>
Here is the fiddle : fiddle
My exact question is related to using skrollr js like plugin.
I have features section with image and its features.Features are in list-items div and image is in another div.These two divisions are col-sm-6 side by side.
What I exactly trying to do is just to fix the position the image division exactly at center after it is scrolled into view-port center.So that if someone scroll-down to view the image, it should remain fixed after its center touches view-port center.While image remains fixed, list items should be scrolled.
Image position will become again static and scrolled with content after last list-items goes out of the view-port. So any suggestion...
Here is the code
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<ul class='featuresnav'>
<li>Graphically Rich</li>
<li>Fully Adaptable</li>
<li>Colors used</li>
<li>UI/UX Compatible</li>
<li>Awesome coding</li>
</ul>
</div>
<div class='col-sm-6'>
<img src='images/mobile_tablet.png' alt="display image"/>
</div>
</div> <!--row ends-->
</div> <!--container ends-->
$(document).ready(function(){
$(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight())) {
$('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
}
else{
$('#divv').css({'position':'relative'});
}
})
})
#content-initial{
margin-top:1500px;
}
#divv{
width:100px;
height:100px;
background:green;
}
#content{position:relative;}
#somemorecontent{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
<div id="content">
<ul>
<li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div id="divv"></div>
<div id="somemorecontent"></div>
I have two containers, both droppable , one of them contains draggable div element(child of this container) , how can i drag and drop this div into another container, make it child of container where div is dropped and keep this div still draggable? Later i will need to drag this element back to it's initial container which should become child again and stay draggable.
I can not make this div to be draggable when i drop it into container.
$(".dropzone").droppable({
greedy: true,
accept: ".dragable",
hoverClass:"highlight",
drop: function (e, ui) {
$(ui.draggable).detach().appendTo($(this));
}
});
<section id="mockup3" class="mockup-section mockup-content mockup-section--dark paint-area dropzone" >
<div class="figConteiner1" style="border:2px black solid">
<h2 id="figHeading1 "class="figHeading dropzone changeColor">Naujienos</h2>
<figure class="figure resizable dragable">
<div class="f-image">
<img scr="#">
</div>
<div id="f-caption1" class="f-caption dropzone">
<h3 id="headingH1"class="fcaption-heading1 dropzone changeColor">Naujiena 1</h3>
<p id="headingP1"class="pHeading1 dropzone changeColor">tekstas 1</p>
</div>
</figure>
</div>
</section>
<section id="mockup2" class="mockup-section mockup-content mockup-section--dark paint-area dropzone">
<div id="blokai">
<div id="blokas1" class="blokas resizable dragable dropzone">
<img src="blokas1.jpg">
<div id="tittle1" class="tittle dropzone changeColor" >Planšetės</div>
</div>
</div>
</section>
I need to drag draggable div id="blokas1" to droppable section id="mockup3" make this div child of section and keep it draggable, but now when i drop div draggability disappears.
Any examples is highly appreciated! I'm sorry for my English guys!
I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle
You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.
I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here