I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/
Related
When using the Kendo date picker under ASP Razor, the control opens outside the visible area if the picker is close to the bottom of the page. It also opens at quite a distance from the control.
#model [Company].DebugViewModel
<h2>Development Debug Page</h2>
#using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
#Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
Here is an image:
In the end, thanks to the feedback I got, I decided to drop bootstrap from the project. Lucky for me this is a desktop only application.
Here is what I ended up using:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
#Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
#Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>
So I learning by building a portfolio SPA and I really want to use md-sidenav and so far it works but its showing up above my content and i want it to just push my content to the right when it's opened.
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
});
HTML
<div layout="row" ng-controller="MyController">
<!--MENU ICON AND FUNCTION -->
<md-button ng-click="openLeftMenu()">
<a><i class="material-icons medium">menu</i></a>
</md-button>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="background-color: white;" >
<div class="container" style=" margin-top: 30px;
width: 90%;">
<img class="circle responsive-img ram " src="assets/avatar.png" style="margin-left: 13%">
<p style="font-weight:bold;
text-decoration:underline;color:#FF5E19;
letter-spacing:1pt;word-spacing:2pt;
font-size:18px;text-align:center;font-family:arial, helvetica, sans-serif;
line-height:1;">Ramin Joseph</p>
</div>
<div class="nav-wrapper">
<div class="col l12 s12 m12">
<ul style=" text-align:center;">
<li class="sbar">About</li>
<li class="sbar">Portfolio</li>
<li class="sbar">Shop</li>
<li class="sbar">Contact</li>
</ul>
</div>
</div>
</md-sidenav>
Use attribute md-is-locked-open on md-sidenav element.
However, then you'll have to change the logic how to open the sidenav. I would do it by binding md-is-locked-open to the model state property and then toggling it myself on click event:
<md-sidenav md-is-locked-open="isSideNavOpen">...</md-sidenav>
$scope.openLeftMenu = function() {
$scope.isSideNavOpen = !$scope.isSideNavOpen;
};
For new Angular Material version
Add mode="push" in your <md-sidenav>.
<md-sidenav mode="push">
</md-sidenav>
Refer this : Sidenave | Angular Material | Mode
I am using jquery-mobile, and I have these two buttons:
<p id="propart">Pro:
<select id="chosenpro" data-inline="true"></select>
<button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>
I would like them to be displayed side by side (inline).
But I can't figure it out. I did this but it doesn't work. Can you help ?
Here is my css:
#propart .ui-select {
width:75%;
}
#propart .ui-select .ui-btn-icon-right {
width:100%;
}
#propart .ui-btn {
width:25%;
}
Use ui-grid classes, and override their width.
Demo
Markup
<div class=ui-grid-a>
<div class=ui-block-a>button 1</div>
<div class=ui-block-b>button 2</div>
</div>
CSS
.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }
There is no need to define any css rules.
jqm has Layout grids
All you need to do is:
<div class=ui-grid-a>
<div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
<div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?
I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block
The HTML:
<ul class="tips">
<li>
? Feature 1
<div class="tip">
<h4>Tip Title 1</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 2
<div class="tip">
<h4>Tip Title 2</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 3
<div class="tip">
<h4>Tip Title 3</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
</ul>
The JQuery script
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
The CSS:
.tips div {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}
I have tried to modify the script like so
$("ul.tips li a").hover(function() {
so it targets the "a" tag but the it ends up not showing anything.
You need to end your lines of js:
$("ul.tips li a").hover(function() {
$(this).siblings("div.tip").stop()
.fadeIn()
.css("display","block"); // <-- gotta put the semi-colon
}, function() {
$(this).siblings("div.tip").stop()
.fadeOut(); //<-- here too
});
That seems unusual as it seems like it should work, but try:
$(".tooltip").hover(function() { ... });
You should also change the $(this).find("div")... to $(this).next()...
You need to make sure that you wrap your event handler in the in jQuery's document ready function:
$(document).ready(function () {
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
});
Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready() delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.
More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()