I added my code trail here at http://jsfiddle.net/xBJeV/6/.
I need some help on
1. selecting value in dialog with out disappearing dialog.
2. Dialog should be closed when mouse comes out of div.
Thanks in advance
<div class="editionDetailAction">Action for Item 1</div>
<div class="editionDetailAction">Action for Item 2</div>
<div class="editionDetailAction">Action for Item 3</div>
<div class="editionDetailAction">Action for Item 4</div>
<div id="actionsPopup">
<ul><li>Add xyz</li></ul>
<ul><li>Manage xyz</li></ul>
<ul><li>Show xyz</li></ul>
</div>
jquery code
$(document).ready(function () {
$('.editionDetailAction').click(function (e) {
$("#actionsPopup").dialog("option", { position: [e.pageX+5, e.pageY+5] });
});
$("#actionsPopup").dialog({
autoOpen: false,
dialogClass: 'actionsPopup',
maxWidth:100,
maxHeight: 100,
width: 200,
height: 80,
resizable: false,
});
$(".editionDetailAction").bind("click", function () {
$("#actionsPopup").dialog('open');
});
$(".editionDetailAction").bind("mouseleave", function () {
$("#actionsPopup").dialog('close');
});
});
my css
.editionDetailAction { width: 150px; height: 30px; border: solid 1px #ddd; }
.actionsPopup .ui-dialog-titlebar { display:none; }
Thanks for your time guys...
I added below code and its working for me. Just want to post solution so that others can get benefit out of similar issue....
$(".actionsPopup").bind("mouseover", function () {
$("#actionsPopup").dialog('open');
});
Related
I have wrapper div with padding and I am dynamically adding items inside of it.
I don't want any padding on wrapper div when there is no item in it.
I have created computed method isEmpty to check if there are items or not and used it to add optional class :class={ className: isEmpty } but it doesn't work.
Here is the fiddle link: https://jsfiddle.net/2u9rtdmh/3/
You should wrap an expression for :class into ":
:class="{ className: isEmpty }"
You should read the console errors when trying to diagnose problems, i.e. your jsfiddle doesn't even have an #app element.
The correct syntax for your scenario would be :class="{ 'padding0' : isEmpty }"
Binding HTML Classes
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: "#app",
data: {
},
computed: {
isEmpty() {
return true;
}
}
})
body {
background-color: black;
}
.my-wrapper {
padding: 32px;
background-color: white;
}
.padding0 {
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :class="{ 'padding0' : isEmpty }" class="my-wrapper">
<div>
<div>
</div>
</div>
</div>
</div>
I have a couple different types of UI widgets on my page. There is a class that is common between all of them .ui-widget-content. I need to style this class differently for each one, so I have assigned unique ids or classes to the HTML elements. This worked ok for one type of widget (dialog where I can use the dialogClass option in the JS to assign classes), but the other type of widget (slider) will still only inherit styles from .ui-widget-content even when I specify a style for #id .ui-widget-content to get at the specific element of interest. I'm kind of at a loss on how to override the original style at this point.
HTML:
<div id="opacitySlide" class="slider">
<div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
<div id="HabClassifyGPService">
//whole bunch of stuff
</div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
CSS:
//This one doesn't work and get overridden by the default style .ui-widget-content
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
border: none;
}
I've also attempted to use the custom class I assigned in the HTML instead of the id for the non-working CSS as well, but no luck.
.slider .ui-widget-content {
border: 1px solid black;
}
Here's the JS code:
//Creates the popup dialog for the habitat classification button
var habClassifyDialog = $("#habClassify-dialog").dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'habClassify-dialog',
buttons: [{
id: "classify",
text: "Classify habitat",
click: upload
}],
close: function () {
$('#uploadForm')[0].reset();
$('#validation-text').empty();
}
});
$('#classifyHab').click(function() {
habClassifyDialog.dialog("open");
});
//Creates the popup dialog that contains error messages
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
//Creates the popup dialog that shows the success message
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
}],
close: function () {
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
});
//Create the opacity slider
var handle = $("#opacityVal");
$("#opacitySlide").slider({
range: "min",
value: 100,
min: 0,
max: 100,
create: function () {
handle.text($(this).slider("value") + "%");
},
slide: changeOpacity,
change: changeOpacity
});
If you haven't used jQuery UI before, it automatically adds a whole bunch of default styles to the widgets upon load, that's why you don't see class="ui-widget-content" in my HTML anywhere, it's not necessary to declare it.
Alright, I have officially made the stupidest mistake ever. Considering the HTML was generating with the correct custom ID I assigned, I figured there had to be a way to access the ui-widget-content class using that ID. It was as simple as chaining them together, before when I was testing this I had left a space in between.
Problem CSS (won't work):
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
Simple fix (remove space between id and class):
#opacitySlide.ui-widget-content{
border: 1px solid black;
}
For the sake of completeness, the explanation is that if you leave a space between these items, it thinks the HTML is structured like this:
<div id="opacitySlide">
<div class="ui-widget-content"></div>
</div>
when really my HTML was structured like this:
<div id="opacitySlide" class="ui-widget-content"></div>
Is there a way to create an multiple row image slider like the one in the image below using just css? or is there a way to do this with angular?
The slider needs to move as one (single rows cannot be swiped individually).
First you need to understand the overflow property in css:
https://css-tricks.com/almanac/properties/o/overflow/
This will allow you to see there is a scroll property. That can make your scroll bars. Yours should use overflow-x to scroll the direction you want it to go.
As for angular, you need to look into ng-repeat command. Here is a fiddle that is doing what you are looking for:
<div ng-repeat="user in users | limitTo:display_limit">
http://jsfiddle.net/bmleite/hp4w7/
Quick answer to your question.. no, there is no way to do this with just CSS because you will have to handle the swipe, touch, click, etc. events using javascript. I guess I was working under the assumption that you would be adding angularjs into your application solely for this purpose, so I made a jQuery solution. If that is a wrong assumption, I will rewrite an angular solution.
Basically, the idea is that you structure your HTML/CSS in a way to get the effect of the sliding within a given container, and then use event handlers to update the slider as the user interacts with it.
Working DEMO
HTML
<div class="slider-display centered">
<div class="image-container">
<div class="image">Image<br>1</div>
<div class="image">Image<br>2</div>
<div class="image">Image<br>3</div>
<div class="image">Image<br>4</div>
<div class="image">Image<br>5</div>
<div class="image">Image<br>6</div>
<div class="image">Image<br>7</div>
<div class="image">Image<br>8</div>
<div class="image">Image<br>9</div>
<div class="image">Image<br>10</div>
<div class="image">Image<br>11</div>
<div class="image">Image<br>12</div>
<div class="image">Image<br>13</div>
<div class="image">Image<br>14</div>
<div class="image">Image<br>15</div>
<div class="image">Image<br>16</div>
<div class="image">Image<br>17</div>
<div class="image">Image<br>18</div>
</div>
</div>
<div class="centered" style="text-align: center; max-width: 350px;">
<button class="move-left"><--</button>
<button class="move-right">--></button>
</div>
Javascript
$(function () {
var getWidth = function ($element) {
var total = 0;
total += $element.width();
total += Number($element.css("padding-left").replace("px", ""));
total += Number($element.css("padding-right").replace("px", ""));
total += Number($element.css("border-left").split("px")[0]);
total += Number($element.css("border-right").split("px")[0]);
total += Number($element.css("margin-left").split("px")[0]);
total += Number($element.css("margin-right").split("px")[0]);
return total;
};
var sliderPosition = 0;
var imageWidth = getWidth($(".image").eq(0));
$(".move-left").on("click.slider", function () {
var maxVisibleItems = Math.ceil($(".slider-display").width() / imageWidth);
var maxItemsPerRow = Math.ceil($(".image-container").width() / imageWidth);
var numRows = Math.ceil($(".image-container .image").length / maxItemsPerRow);
var maxPosition = numRows > 1 ? maxVisibleItems - maxItemsPerRow : maxVisibleItems - $(".image-container .image").length;
if (sliderPosition > (maxPosition)) {
sliderPosition--;
var $imageContainer = $(".image-container");
$(".image-container").animate({
"margin-left": sliderPosition * imageWidth
},{
duration: 200,
easing: "linear",
queue: true,
start: function () {
$(".move-left").prop("disabled", true);
},
done: function () {
$(".move-left").prop("disabled", false);
}
});
}
});
$(".move-right").on("click.slider", function () {
if (sliderPosition < 0) {
sliderPosition++;
var $imageContainer = $(".image-container");
$(".image-container").animate({
"margin-left": sliderPosition * imageWidth
},{
duration: 200,
easing: "linear",
queue: true,
start: function () {
$(".move-right").prop("disabled", true);
},
done: function () {
$(".move-right").prop("disabled", false);
}
});
}
});
});
CSS
.image {
float: left;
height: 80px;
width: 80px;
background: #888888;
text-align: center;
padding: 5px;
margin: 5px;
font-size: 1.5rem;
}
.image-container {
width: 650px;
position: relative;
}
.slider-display {
max-width: 450px;
overflow: hidden;
background: #ddd
}
.centered {
margin: 0 auto;
}
I have a footer image which on click returns to the home page.
However, the image shall always be visible. So when the mobile keypad appears the image shall jump above the keypad.
Any idea how to do this?
EDITED :
Here is the directive I tired, but the image doesn't move upwards when the mobile keypad appears. The keypad hides the image:
(function () {
'use strict';
angular
.module('TestApp')
.directive('stickyText', ['$mdSticky', stickyText]);
function stickyText($mdSticky) {
return {
restrict: 'E',
template: '<span style="position: absolute; right: 0; bottom: 0;"> <img src="assets/img/icons/home.png" style="width:40px;height:40px;"> </span>',
link: function (scope, element) {
$mdSticky(scope, element);
}
}
}
})();
HTML code:
<sticky-text ui-sref="home"> </sticky-text>
I managed to move the footer above the keyboard with the following jquery:
$('form').on('focus', 'input, textarea', function() {
$("footer").addClass('aboveKeyboard');
});
$('form').on('blur', 'input, textarea', function() {
$("footer").removeClass('aboveKeyboard');
});
CSS:
.aboveKeyboard img{
top :30%;
}
HTML:
<footer ui-sref="homepg">
<img src="thumb_home.png" style="position: absolute; right: 0;bottom: 0;">
</footer>
Can you please take a look at this demo and let me know how I can separate the .clickme box from the .slidecontent? I need to change the Height of the .slidecontentfor example toheight:300px;` but this also change the grey shadow to 300px
What I need to have is having the .slidecontent with height of 300 and looks like the third (green arrow)
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({left:'-280px'}, {queue: false, duration: 500});
});
});
#slideout {
background: #666;
position: absolute;
width: 300px;
height: 300px;
top: 45%;
left:-280px;
}
#clickme {
float: right;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
>
</div>
</div>
I am not 100% sure I understand what you are trying to do but your jQuery code refers to the parent of clickme which is slideout, not slidecontent and it is probable that this is causing the undesired effect. Is there a reason you are not referencing slidecontent directly?