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>
Related
i have a image gallery on vuetify and trying to enlarge the image using the fullscreen function.
<template>
<v-container class="mt-12">
<v-row justify="center" v-if="!$fetchState.pending">
<v-col
cols="4"
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
>
<v-img
class="d-flex child-flex"
:src="`${image.attributes.formats.large.url}`"
:lazy-src="`${image.attributes.formats.thumbnail.url}`"
contain
#click="toggleFullscreen(image.attributes.url)"
>
</v-img>
</v-col>
</v-row>
<v-row v-else>
<LoadSpinner />
</v-row>
and my toogle method
methods: {
toggleFullscreen(elem) {
console.log(elem);
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else {
alert(
"Sorry, your browser is too old and doesn't support fullscreen :-("
);
}
},
},
i have and array coming from a strapi api, the idea is show in the gallery a low res image and when cliking fullscreen the high res version.
problem everytime i click it triggers the alert, so the method is not getting the correct info to work, could be v-img creates a div and uses de image as background?
thanks
pd tried already dialog and overlay but can't figure out how to "attack" individual elements
After trying various libraries and what had to offer vuetify i did a workaround with vanilla css.
I created a variable, when you click on a image passes the url of the image, the template loads a div when this variable is not null with and overlay class to cover the screen.
in my template
<v-img
v-for="image in service.data.attributes.gallery.data"
:key="image.id"
:src="`${image.attributes.formats.large.url}`"
#click="toggleFullscreen(image.attributes.url)"
/>
<div v-if="selectedImage" class="overlay">
<v-img
class="mt-12"
:src="selectedImage"
alt=""
height="95vh"
contain
dark
#click.stop="selectedImage = null"
>
</v-img>
</div>
script part
<script>
...
export default {
data() {
return {
...
selectedImage: null,
};
},
...
methods: {
toggleFullscreen(elem) {
this.selectedImage = elem;
},
},
};
</script>
css
.overlay {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: Fomantic-UI provides a modal capability - just call .modal() on a JQuery element et voila. However, when the modal is closed, the DOM elements for the modal element remain hidden in the DOM. My use case requires removal of those elements, but I am concerned about the 'left over' wiring for the modal capability.
Research done: The FUI documentation on modals is useful but is written from the perspective of getting a modal up, but not cleanly taking it down.
Reproduction: The snippet below is a code-based approach to creation of a modal and wiring for the button listeners. Click the button to open the modal, then click the close button. Two seconds later a simple JQuery count of DOM modal elements remaining will be shown - it should be zero but will be 1.
Notes:
1 - FUI modal has a frustrating feature of auto-closing the modal when any button is clicked. It has one saving clause which is that if the triggered button event handler returns false then the modal stays open. Clearly, if you are doing form validation etc, you need to know this. Additionally, if you prefer to override the default feature for all buttons, return false from the onHide function, e.g.
element.modal('setting', 'onHide', function(){ return false; });
element.modal('show');
2 - This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (Edited 17-Jan-2020).
var fnSpecial = function(){
console.log('Close button click function - return true to hide');
// ... do function activity here....
return true;
}
$('#b1').on('click', function(){
makeModal({
title: 'I be modal',
content: 'Modal be I !',
actions: [
{ text: 'Close', fn: fnSpecial}, // for more buttons in the modal add more entries here.
]
})
})
function makeModal(opts){
// create your modal element - I grab the modal template
var tplt = $('#modalTemplate').html();
// defaults for modal create
var obj = {
title: 'No title !',
content: 'No content',
actions: [
]
}
// Merge the above defaults with the user-supplied options
obj = $.extend(obj, opts);
// Apply modal options to the soon-to-be modal element
var ele = $(tplt);
ele.find('.modalHeading').html(obj.title);
ele.find('.modalBody').html(obj.content);
ele.addClass('modalContentCopy');
var modalButtons = ele.find('.modalButtons');
for (var i =0, max = obj.actions.length; i < max; i = i + 1 ){
var btn = $('<button >' + obj.actions[i].text + '</button>');
var fn = obj.actions[i].fn;
btn.data('fn', fn); // store the callback on the element to avoid closures.
btn.appendTo(modalButtons);
btn.on('click', function(e){
var fn = $(this).data('fn');
if (typeof fn === "function"){
var hide = fn(); // IMPORTANT: the function triggered for the button must return true to close the modal or false to keep it open !
console.log('Button says hide=' + hide)
if (hide){
ele.modal('destroy');
ele.modal('hide');
$('#info')
.html('***');
// wait 2 secs and see if the DOM element has gone
setTimeout( function(){
var num = $('.modalContentCopy').length;
$('#info')
.html(num)
.css({ backgroundColor: (num === 0 ? 'lime' : 'red')});
}, 2000);
}
}
});
}
// Simple example of how to reveal the modal element as a f-ui modal
ele
.appendTo($('body'))
.modal('setting', 'transition', "vertical flip")
.modal('setting', 'onHide', function(){ return false; }) // stop the auto-closing by FUI
.modal('show'); // finally show the modal
}
p {
padding: 10px;
}
.modalContent {
border: 1px solid lime;
margin: 5px;
padding: 5px;
}
.modalHeading {
border: 1px solid cyan;
margin: 5px;
padding: 5px;
}
.modalBody {
border: 1px solid magenta;
margin: 5px;
padding: 5px;
}
.modalContent {
background-color: white;
}
.ipt {
margin: 5px 20px;
display: block;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal, then the 'Close' button to close it. See console for messages. The critical point is the final display of the modal artefact count which appears after a 2 second delay, allowing for transitions to complete. We want a zero - what will it be?
</p>
<p>
<button id='b1'>Show a modal</button> <span>Count of DOM artifacts after close should be zero - value is >>>>> </span><span id='info'>[value will appear here after modal close]</span>
</p>
<div id='modalTemplate' style='display: none;'>
<div class='modalContent'>
<div class='modalHeading'>
I am the heading
</div>
<div class='modalBody'>
I am the body
</div>
<div class='modalButtons'>
</div>
</div>
</div>
</body>
The answer is to use the currently undocumented features of modal('destroy') and modal('remove') after the closing animation completes.
.modal('setting', 'onVisible', function(){
ele
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
console.log('Animation complete')
$(this).off(e); // remove this listener
$(this).modal('destroy'); // take down the modal object
$(this).remove(); // remove the modal element, at last.
});
})
If you do not observe the completion of the closing transition then FUI throws a warning about transitions on missing elements.
Modal.Destroy clears out the modal object that FUI attaches to the JQuery modal element. The ele.remove() is the standard JQuery remove function. The result is, as per my requirement, the element previously made modal is removed from the DOM.
There will be one artefact which is the FUI dimmer div, but my testing to date shows that this is not an issue, meaning they are not visible and do not rack up over time.
See snippet below for working example. Look at the end of the JS section for the solution.
var fnSpecial = function(){
console.log('Close button click function - return true to hide');
// ... do function activity here....
return true;
}
$('#b1').on('click', function(){
makeModal({
title: 'I be modal',
content: 'Modal be I !',
actions: [
{ text: 'Close', fn: fnSpecial}, // for more buttons in the modal add more entries here.
]
})
})
function makeModal(opts){
// create your modal element - I grab the modal template
var tplt = $('#modalTemplate').html();
// defaults for modal create
var obj = {
title: 'No title !',
content: 'No content',
actions: [
]
}
// Merge the above defaults with the user-supplied options
obj = $.extend(obj, opts);
// Apply modal options to the soon-to-be modal element
var ele = $(tplt);
ele.find('.modalHeading').html(obj.title);
ele.find('.modalBody').html(obj.content);
ele.addClass('modalContentCopy');
var modalButtons = ele.find('.modalButtons');
for (var i =0, max = obj.actions.length; i < max; i = i + 1 ){
var btn = $('<button >' + obj.actions[i].text + '</button>');
var fn = obj.actions[i].fn;
btn.data('fn', fn); // store the callback on the element to avoid closures.
btn.appendTo(modalButtons);
btn.on('click', function(e){
var fn = $(this).data('fn');
if (typeof fn === "function"){
var hide = fn(); // IMPORTANT: the function triggered for the button must return true to close the modal or false to keep it open !
console.log('Button says hide=' + hide)
if (hide){
ele.modal('destroy');
ele.modal('hide');
$('#info')
.html('***');
// wait 2 secs and see if the DOM element has gone
setTimeout( function(){
var num = $('#theBody').find('.modalContentCopy').length;
$('#info')
.html(num)
.css({ backgroundColor: (num === 0 ? 'lime' : 'red')});
}, 2000);
}
}
});
}
// Simple example of how to reveal the modal element as a f-ui modal
ele
.appendTo($('body'))
.modal('setting', 'transition', "vertical flip")
.modal('setting', 'onHide', function(){ return false; }) // stop any button closing the modal
// <solution starts>
.modal('setting', 'onVisible', function(){
ele
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
console.log('Animation complete')
$(this).off(e);
$(this).modal('destroy');
$(this).remove();
});
})
// <solution ends>
.modal('show'); // finally show the modal
}
p {
padding: 10px;
}
.modalContent {
border: 1px solid lime;
margin: 5px;
padding: 5px;
}
.modalHeading {
border: 1px solid cyan;
margin: 5px;
padding: 5px;
}
.modalBody {
border: 1px solid magenta;
margin: 5px;
padding: 5px;
}
.modalContent {
background-color: white;
}
.ipt {
margin: 5px 20px;
display: block;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body id='theBody'>
<p>Click the 'show modal' button to open a modal, then the 'Close' button to close it. See console for messages. The critical point is the final display of the modal artefact count which appears after a 2 second delay, allowing for transitions to complete. We want a zero - what will it be?
</p>
<p>
<button id='b1'>Show a modal</button> <span>Count of DOM artifacts after close should be zero - value is >>>>> </span><span id='info'>[value will appear here after modal close]</span>
</p>
<div id='modalTemplate' style='display: none;'>
<div class='modalContent'>
<div class='modalHeading'>
I am the heading
</div>
<div class='modalBody'>
I am the body
</div>
<div class='modalButtons'>
</div>
</div>
</div>
</body>
I am currently working on a page. I have used polymer's paper-drawer-panel and paper-header-panel combination.
Basically there are two containers, the inner container needs to be scrolled horizontally while the outer container needs to be scrolled vertically. When I have not used the paper-header-panel, the behavior is appropriate. You can see the demo here. If you open this site on a mobile browser (chrome or others/haven't checked with Safari) or on the mobile simulator in chrome, I can scroll both horizontally as well as vertically. This is the behavior I have expected.
But, when I add in the paper-header-panel (part of my custom element <app-layout>), I am able to scroll horizontally (in a mobile browser) but when I touch an element present in the horizontally scrollable div and try to scroll it vertically as in the previous case, the vertical scroll doesn't work anymore. The demo is present here.
The relevant source code for the app-layout element is as below.
html -
<dom-module id="app-layout">
<link rel="import" type="css" href="app-layout.css">
<template>
<paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="280px">
<paper-header-panel class="list-panel" drawer>
<!-- List Toolbar -->
<div class="paper-header has-shadow layout horizontal center" id="navheader">
</div>
<!-- Menu -->
<div class="left-drawer">
<paper-menu class="list" selected="0" on-iron-activate="_listTap">
<template is="dom-repeat" items="{{menus}}">
<paper-item role="menu"><iron-icon class="menuitems" icon$={{item.icon}}></iron-icon><span>{{item.label}}</span></paper-item>
</template>
</paper-menu>
</div>
</paper-header-panel>
<paper-header-panel class$="{{positionClass}}" main mode="{{mainMode}}">
<!-- Main Toolbar -->
<paper-toolbar class$="{{toolbarClass}}">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div style="width:60px" id="app-image"><iron-image style="width:40px; height:40px; background-color: lightgray;"
sizing="contain" preload fade src= "/images/app-icon-110.png"></iron-image></div>
<div hidden$="{{_isMobile}}" class="flex">{{label}}</div>
<div class="flex"></div>
<paper-icon-button icon="search" on-tap="toggleSearch"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="content">
<paper-material>
<content select=".main-content"></content>
</paper-material>
</div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
CSS -
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host {
width: 100%;
height: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
display: block;
}
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
}
paper-header-panel {
background-color: #eee;
}
paper-toolbar {
background-color: #00bcd4;
}
.left-drawer {
background-color: #eee;
}
paper-header-panel .content {
height: 100%;
}
paper-header-panel[mode=cover] .content {
padding: 0 90px 0 0px;
height: 100%;
}
paper-header-panel {
--paper-header-panel-cover-container: {
height: 100%;
left: 90px;
};
}
paper-header-panel[mode=cover] paper-toolbar {
color: #fff;
font-size: 20px;
font-weight: 400;
padding-right: 16px;
}
.paper-header-panel paper-toolbar #app-image {
margin-left: -15px;
}
paper-material {
overflow-y: auto;
height: auto;
background-color: #fff;
z-index: 1;
}
paper-header-panel[mode=cover] paper-material {
max-width: 1024px;
margin: 64px auto;
}
From our Comments,
As an alternative solution until you find the problem you can test using Iscroll 5 for the horizontal scroll of the cards and see if it works ok within the App.
Ive used Iscroll 5 for my App using both horizontal and vertical scrolls with 100's of Items and its fast on Polymer. I haven't had any performance issues so far although i turned off bounce in iscroll options eg ,bounce: false to get that extra performance boost
If you have Click events for the Cards then add ,click:true to the Iscroll options
Iscroll 5 guide here http://iscrolljs.com/
The demo creates the Iscroll for any row when the user scrolls horizontally there to save resources and the Original Demo in my comments was for JQM framework which has built in Swipe detection.
In Polymer version 0.5 it has built in Touch functionality not sure about version 1 yet but i never used yet https://www.polymer-project.org/0.5/docs/polymer/touch.html
For Polymer i created another Demo that Uses Javascript Touch events to detect horizontal movements only so you wont need any Other Touch gesture Pluggings to add to the App
Demo I set a 5sec delay for the code to initialize. Pretty much all the code is for handling Touch. In the function slide(x) { is the Iscroll code about 10 lines
http://codepen.io/anon/pen/pJRmLo
Code
var slides = 17; //how many items in a row
var totalwidth = slides * 80; //times that by the width of each item in a row
$(".scroller").css("width", totalwidth+"px"); //set the total width of the horizontal wrapper
// touch function
var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {
document.addEventListener('touchstart', function(e) {
// Is this the first finger going down?
if (e.touches.length == e.changedTouches.length) {
startPos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
}
});
document.addEventListener('touchmove', function(e) {
// If this is the first movement event in a sequence:
if (startPos) {
// Is the axis of movement horizontal?
if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
handlingTouch = true;
e.preventDefault();
onSwipeStart(e);
}
startPos = undefined;
} else if (handlingTouch) {
e.preventDefault();
onSwipeMove(e);
}
});
document.addEventListener('touchend', function(e) {
if (handlingTouch && e.touches.length == 0) {
e.preventDefault();
onSwipeEnd(e);
handlingTouch = false;
}
});
function slide(x) {
var cclass = $(itemis).attr("class")
var ccclass = "."+cclass;
var newis = $(itemis).attr("data-id");
if (newis != "running") {
var cclass = new IScroll(ccclass, {
eventPassthrough: true,
scrollX: true,
scrollY: false,
preventDefault: false
});
cclass.scrollBy(-50, 0, 500);
//control here how many pixels to auto scroll uppon activating the scroll eg -50px
$(itemis).attr("data-id","running")
}
}
var swipeOrigin, x, itempos;
function onSwipeStart(e) {
// find what element is been touched. In your case it may be closest("swElement") but you need to test
itemis = $(e.target).closest("div");
// when touching over an element get its target, in this case the closest div of the row
swipeOrigin = e.touches[0].clientX;
}
function onSwipeMove(e) {
x = e.touches[0].clientX - swipeOrigin;
// slide(x);
}
function onSwipeEnd(e) {
//On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element +100 pixels.
if (x > 35) {
slide(0);
}
else {
slide(0);
}
}
}, 5000);
The above touch function I originally used for transforming/moving list items by touch drag similarly to Gmail App, for JQM and Polymer list items. Can be used for anything horizontally in the case of Iscroll is not really used in that way but it basically says if you touch move horizontally over a row activate the Iscroll for that row
Check my demo in the Link for an alternative use of the function.
jQuery touchSwipe event on element prevents scroll
The problem arises because on mobiles, horizontal scrolling is disabled when vertical scrolling is active and vice-versa. I have solved this for now using Tasos suggestion to use iScroll. I used polymer's async function to initialize the scrollers with a delay. Here is the code I have used as part of polymer-ready.
<script>
Polymer ({
...
...
ready:function() {
this.async(function() {
this.setScroll();
}, null, 300);
},
setScroll: function() {
var nodeList = document.querySelectorAll('.wrapper');
if(nodeList.length == 0) {
this.async(function() { this.setScroll(); }, null, 300);
}
for (var i=0; i<nodeList.length; i++) {
// this.setScrollDirection ('y', nodeList[i]);
nodeList[i].id = 'wrapper'+i;
var myScroll = new IScroll('#'+nodeList[i].id, { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
// myScroll.scrollBy(-50, 0, 500);
}
}
})();
</script>
I was also able to use Polymers track gesture as mentioned in the documentation.
Listening for certain gestures controls the scrolling direction for
touch input. For example, nodes with a listener for the track event
will prevent scrolling by default. Elements can be override scroll
direction with this.setScrollDirection(direction, node), where
direction is one of 'x', 'y', 'none', or 'all', and node defaults to
this.
state - a string indicating the tracking state:
start - fired when tracking is first detected (finger/button down and moved past a pre-set distance threshold)
track - fired while tracking
end - fired when tracking ends
x - clientX coordinate for event
y - clientY coordinate for event
dx - change in pixels horizontally since the first track event
dy - change in pixels vertically since the first track event
ddx - change in pixels horizontally since last track event
ddy - change in pixels vertically since last track event
hover() - a function that may be called to determine the element currently being hovered
I have used (dx > dy) to understand whether it is a horizontal or vertical swipe and then enabled horizontal and vertical swiping specifically as per the case. This worked but I liked the bounce and the other options provided by iScroll and besides its only 4KB minified and gzipped. So, I decided to go with iScroll.
[Note: jQuery is not needed to use iScroll. It is an independent script]
I would like to highlight a div when it's clicked.
Heres the example: www.spidex.org
On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.
You may use jQuery for achieving this.
get jQuery here.
now consider that you have a div that you want to highlight on mouseover called item.
do this by adding an overlay div.
div.overlay{
opacity:0;
background:#000;
width:100%;
height:100%;
position:absolute;
top:50px;left:0;
}
then use jquery
jQuery(document).ready(function($){
$('.item').mouseover(function(){
$('.overlay').css({opacity:0.3});
});
});
You can change the appearance of elements when hovered using the :hover pseudo-class.
For example
div:hover {
color: red;
}
Secondly, you can change the text color via using the color property and the background color using the background-color property.
Both are shown below:
div:hover {
color: black;
background-color: white;
}
In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.
One cross-browser approach (using jQuery in this example) you might consider would be the following:
EXAMPLE HTML:
<div class="header">
Some Link
</div>
<div class="body">
<div class="body-content">
[ CONTENT HTML ]
</div>
<div class="body-cover"></div>
</div>
EXAMPLE CSS:
.body {
position: relative; /* container needs position */
}
.body-cover {
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
/*
you could use a sligtly transparent background here,
or tween your opacity in your javascript
*/
}
EXAMPLE JavaScript:
// on dom ready
jQuery(function ($) {
// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';
// closure methods
var fMouseOver = function () {
// check to see if hidden (not already tweening or showing)
if ($cover.hasClass(sCoverHiddenCssClassName)) {
// check content, may have changed.
$cover.css({
height: $content.outerHeight(),
width: $content.outerWidth()
});
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverHiddenCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeIn(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverShowingCssClassName);
});
}
};
var fMouseOut = function () {
// check to see if visible (not already tweening or hidden)
if ($cover.hasClass(sCoverShowingCssClassName)) {
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverShowingCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeOut(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverHiddenCssClassName);
});
}
};
var fClick = function (e) {
// prevent default if needed for anchors or submit buttons
// e.preventDefault();
if ($cover.hasClass(sCoverHiddenCssClassName)) {
fMouseOver();
}
else if ($cover.hasClass(sCoverShowingCssClassName)) {
fMouseOut();
}
};
// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
// wire links
jQuery(this)
.mouseover(fMouseOver)
.mouseout(fMouseOut);//
//.click(fClick); // use click event if desired
});
});
JQuery UI is also gives an good option to quickly highlight div .
https://jqueryui.com/effect/
$( "#divId" ).effect( "highlight", 500 );
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');
});