Fiddle - http://jsbin.com/asaVUmAP/1/edit
I've been working on a website designer application, and today I added the ability to sort dialogs in a properties panel. My app is built for both desktop and touch devices. (I'm also using JQuery UI Touch Punch)
After I applied JQuery UI's sortable I tested it out on my iPod, and I can no longer scroll in a div contained in ".sort div". Does anyone know of a way to fix this?
Here's the code I'm using...
$('.sort-container').sortable({placeholder: "ui-state-highlight", helper:'clone', cancel: ".sort div"});
OK done.
I went a little overboard and started fixing other stuff too...some of which you'll probably change like the page height, etc. I did that so you can scroll the whole bar without being super exact, while still being able to scroll the tiny boxes AND sort them.
JSBin Code
JSBin Demo - use on iPhone
Javascript:
// Toggle Dialog Visibility
$(".dialogname").toggle(function () {
$(this).next().slideUp();
$(this).html(" ▶" + $(this).attr('title'));
}, function () {
$(this).next().slideDown();
$(this).html(" ▼" + $(this).attr('title'));
});
$('.sort-container').sortable({
items: '> .sort',
placeholder: "ui-state-highlight",
helper: "clone",
scroll: true
});
$('.dialog').on('click mousedown mouseover select touchstart touchmove', function (evt) {
var e = evt || window.event;
e.stopPropagation();
});
CSS:
body {
background:#ccc;
height: 100%;
}
.sort-container {
position:absolute;
top: 0;
right: 0;
width: 50%;
padding: 5%;
overflow: auto;
background: #202020;
}
.dialog {
position: relative;
margin: 10px auto;
width: 90%;
height: 150px;
color: #ccc;
background: #333;
overflow: auto;
}
.dialog textarea {
position:relative;
width:90%;
top:5%;
left:5%;
height:90%;
border:0;
padding:0;
margin:0;
}
.dialogname {
cursor:pointer;
color:#fff;
display:block;
width:100%;
}
There's a lot of HTML, really not a necessary part of this since I didn't change any of it.
Hope this helps :)
Related
i have problem my function not working in mobile browser but when i open in browser desktop work i dont know why... maybe anybody know or have experience like me
i have try this code
$('body').on('click touchstart', '.show_range', function(event) { alert("hello"); })
work in desktop but not in mobile browser
i have try this code when i set id in my link
$(document).on("click", "#show_range", function(event){
alert( "GO" );
});
work in desktop but not in mobile browser
if you are using bootstrap modal then make some change as below,
in bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
and in bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
OR
try this,
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}
You can try the following:
$('#show_range').on("click", function(event){
alert( "GO" );
});
thank for you help guys now my problem solved..
my mistake i set href="javascript:void()" and i change to href="#"
I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look
You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?
Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>
You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM
use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well
I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}
Goal
To have the page navigation positioned lower on the page when initially loaded. So that it looks like pictured below.
Background
I created a navigational element that is using Headroom.js to control its position. The point of the library is that it moves the desired navigational item out of view when a user is scrolling down so that you can see more content. Then the item shows up when you scroll back up to make it convenient to click on a link if that is what you needed to do.
Current State
I have this current demo on codepen.
That navigational item is at the top of the page but on a lower z-index. So not initially visible.
when you scroll down the element is out of view.
But when you scroll up, it is where it needs to be
Code
HTML
<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
<ul>
<li>Products</li>
<li>Features</li>
<li>Testimonials</li>
<li>Cases</li>
</ul>
</nav>
CSS
#page-menu {
background-color: #BA222B;
list-style-type: none;
width: 100%;
z-index:10;
}
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
#page-menu ul li a {
text-decoration: none;
color: #fff;
}
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
jQuery
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
Full demo on codepen.
Goal :
From what you are describing, you want the read navigation to appear as such on page load:
And move with the gray bar, but and down, as the user scrolls, until it cutoff point reaches the bottom of the gray bar. Then you want things to kick in, and have the red bar slide up and out of view, and then up and down depending on scroll. You want the transition to be smooth.
Method:
The thing to keep in mind for a smooth transition is that you have two states: A top state and a bottom state. You have to design both, you have to figure out the exact height to change over, and you have to make sure that they will be identical at that spot, so appear seamless.
Top State:
We don't need any sort of extra positioning here. We want it to be static in fact, as odd as that might sound.
Bottom State:
We want fixed positioning here. Since we want the changeover to occur right when the red bar touches the top of the window, your CSS in fixed-header is perfect already.
Changeover Height:
The header and the gray nav bar combined are 180px, so that number will be our change over.
Code:
1. Statechange
Lets work backwards and take the state change first. You will need to change from 150px to 180px in a lot of places. For example, your JS code:
Existing JS:
if ($(window).scrollTop() >= 150) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
New JS:
if ($(window).scrollTop() >= 180) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 180,
And your header will need an updated height, or a removal of height entirely.
Existing CSS:
header {
height:150px;
position: relative;
z-index:30;
}
New CSS:
header {
position: relative;
z-index:30;
}
2. Top State
The big thing here messing you up is that for some reason the library you are using is applying .header--fixed and link-header on page load. I don't know how to prevent this, but we can just neutralize is by removing them from your CSS.
Remove This CSS:
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
Second, we need to tweak the ul inside your red nav.
Existing CSS:
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
New CSS:
#page-menu ul {
list-style-type: none;
margin: 0 auto;
padding:0;
width:960px;
max-width:100%;
text-align:right;
}
3. Bottom State
Everything works really well here aleady, except that the fixed-header class is getting added to the gray nav as well. We need to tweak our jQuery selector bit.
Existing JS:
if ($(window).scrollTop() >= 180) {
$('nav#page-menu').addClass('fixed-header');
}
else {
$('nav#page-menu').removeClass('fixed-header');
}
NewJS:
if ($(window).scrollTop() >= 180) {
$('header nav').addClass('fixed-header');
}
else {
$('header nav').removeClass('fixed-header');
}
4. Misc Cleanup
Everything looks really good here, except that the lis inside our two navs don't line up. We need to fix some margin-right to bring them into line.
Existing CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
New CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
Finally, I noticed that there's a missing closing bracket in your HTML, in the gray nav. It's not hurting much, but it could:
<nav>
<ul>
<li>Dentists</li>
<li>Labs</li>
<li>Patients</li>
<ul> <--- ( Should be </ul> )
</nav>
End Result:
http://codepen.io/anon/pen/qIrhx
i am trying to code a datepicker which will also show some information alongside the calendar.
currently i have this code.
http://jsfiddle.net/sFBn2/
$('#datepicker').datepicker({
beforeShow: function(input, inst) {
insertMessage();
}
});
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);
function insertMessage(message) {
clearTimeout(insertMessage.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible'))
$('#ui-datepicker-div').append('<div class="info">information panel</div>');
else
insertMessage.timer = setTimeout(insertMessage, 10);
}
it shows "information panel" below the calendar. i want to display the info left side to the calendar. i guess i have to wrap the whole datepicker into a div, then insert panel and datepicker side by side. but not sure how to accomplish it.
EDIT:
navigating between months hides the panel. i think a better approach to the javascript is required.
any thoughts?
I changed the append() to prepend() and changed your CSS to this:
.info{
width:50px;
height:50px;
float: left;
margin-left: -60px;
background: lightgreen;
}
#ui-datepicker-div {
margin-left: 60px;
}
Not the cleanest solution (with negative margin), but it does work.
See this Fiddle
You just need to tweak some CSS to achieve this, Check the below codes
CSS
#ui-datepicker-div {
width: 400px;
float:left;
position: relative;
}
table.ui-datepicker-calendar{
width: 300px;
float:right;
}
.ui-datepicker-header {
width: 300px;
float: right;
}
.info{width:50px;height:50px;float:left;
position:absolute;
top: 0;
left: 0;
}
I've got this simple mobile webpage I'm trying to build, with a Facebook like side menu button. I'm trying to disable horizontal scrolling with the CSS overflow-x:hidden, but it's not working. Here's my code, any help will be greatly appreciated:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var win = $("#right-side");
var position = win.position();
//alert( "left: " + position.left + ", top: " + position.top );
if(position.left < 100)
{
$("#right-side").animate({left:'250px'});
}else{
$("#right-side").animate({left:'0px'});
}
});
});
</script>
<style>
body{overflow-x: hidden;font-family: sans-serif;}
#right-side{
background:#BFC7D8;;
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#left-menu
{
background:#323949;
left:0;
top:0;
height:100%;
width:250px;
position:absolute;
}
#navigation { font-size:20px; width:250px; padding-top:100px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level li > a {
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ccc;
text-indent: 20px;
}
#toolbar
{
width:100%;
height:50px;
background:#00F;
}
</style>
<div id="left-menu">
<div id="navigation">
<ul class="top-level">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
<li>News</li>
</ul>
</div>
</div>
<div id="right-side">
<div id="toolbar">
<button>Menu</button>
</div>
<h1>This is a test</h1>
</div>
I have put your code in a fiddle but I couldn't add the 'zoom' meta tag to the head, so it is hard to test on my phone. http://jsfiddle.net/Pevara/Ku5nY/1/show/
Seems to work fine on desktop though, no scrollbars.
I did add the following to your css:
body{
overflow-x:hidden;
font-family: sans-serif;
/* added: */
max-width: 100%;
height: 100%;
}
Not sure if it will make a difference, but it is worth a try...
David.
Have you tried using this: http://mmenu.frebsite.nl/
Alternatively, Take a look at this and see if you can use it to adjust to your code:
http://jsfiddle.net/tzDjA/
You will notice there are 3 functions:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
I had a similar issue where I had the menu behind my content and was pushing my content to the left to reveal the facebook style menu hidden behind.
I was applying 'absolute' positioning to mimic the slide across and taking the content out of the document flow. With overflow hidden it seemed you could pull the content layer over with touch (which sounds like the same issue as you encountered). Even with overflow std, x & y set on almost everything this still occurred. This was also with width:100% on body etc.
Changing the content layer to 'relative' when I slid this across and then reducing the height of the content (while the menu was open) to the windows height seemed to work for me and seemed fairly robust over devices.
Good luck, that should help for anyone experiencing a similar issue.
Thanks,
Dave
Here's a quicky. The thing is it ONLY works if you define your modal's height. Without the height defined it won't work. Set the dialog to height 100% & overflow hidden. Then set the content to position: absolute, top: 0, bottom: 0, left: 0, right: 0, margin: auto and define the height (in below example 250px for a login modal). I know it sounds irrational - it probably is a CSS glitch, but: it works - cross browser & cross platform (haven't checked iPhone).
<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">