I want to have a popup in Jquery mobile that would not stop users from interacting with a page and data-dismissible="false" that is the popup would not disappear when another part of the page is interacted with and stays visible.
I have tried this
$('#popupNew').popup({ dismissible: false });
$('#popupNew').popup('open');
But this creates a modal popup that prevents users from interacting with rest of the page.
Intro
I hope this is everything you need.
Popup can not be closed if surface outside of it is clicked
Elements below popup are now accessible
Popup is draggable (tested on Firefox, Chrome, Android Chrome)
Few more notes. Some of a javascript code used here is not mine, I am talking about a fix used to make it draggable on mobile devices. Unfortunately I can't remember whose solution it is.
CSS is used to make page clickable when popup is opened. Overlay div name is combination of popup id and suffix -screen, in this case it is #popupBasic-screen.
Working example
Working example: http://jsfiddle.net/Gajotres/tMpf7/
Code used
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop" >Basic Popup</a>
<a data-role="button" id="test">click me</a>
<div data-role="popup" id="popupBasic" data-dismissible="false">
Close
<p>This is a completely basic popup, no options set.</p>
</div>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$('#popupBasic').draggable({
cursor: 'move'
});
$(document).on('click', '#test', function(){
alert('Successful click!');
});
});
// This is a fix for mobile devices,, rest of the code is not mine
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
CSS:
#popupBasic-screen {
display: none;
}
Related
I have looked at many examples for passing data from Javascript to Magnific pop-up, when the mouse leaves the screen the pop-up will fire 1 time and then you will have to refresh the page.
However I cannot get the pop-up to animate or have and effect.
I would like to use mfp-3d-unfold or mfp-zoom-out as an effect and #test-popup div id as the content
Could someone help me how to fix the code.. I am really confused at this point.
TKS
<html>
<head>
<title> Test leave Screen New 2</title>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<link rel='stylesheet prefetch' href='magni/magnific-popup.css'>
<link rel="stylesheet" href="magni/magnimain1.css" media="all">
<script src="magni/prefixfree.min.js"></script>
<script>
visitchecka = 0;
$(document).on('mouseleave', leaveFromTop);
function leaveFromTop(e){
if( e.clientY < 0 ) // less than 60px is close enough to the top
if (visitchecka < 1 ) {
visitchecka++;
visitchecka++;
// window.location='#test-popup'.css;
$.magnificPopup.open({
items : {
mainclass: 'mfp-zoom-out',
src: '#test-popup',
},
type: 'inline',
});
}
}
</script>
</head>
<body>
<div class="links">
<h4>Text-based:</h4>
<ul id="inline-popups">
<li>3d unfold</li>
<li>Zoom-out</li>
</ul>
Popup with "hinge" close effect (based on animate.css)
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.foofoo</div>
<script src='magni/jquery.min213.js'></script>
<script src='magni/jquery.magnific-popup.min.js'></script>
<script src="magni/index.js"></script>
</body>
</html>
You can do it by using .click() simply call your element to trigger click and popup will open on window leave... here I've made an example for you..
$('#clickme').magnificPopup({
delegate: 'a',
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true
});
// this is what you need
$(".main").mouseleave(function(){ // your window or parent element you can use document if you want
$('.popup').click(); // trigger click for popup
});
I'm playing around with event-delegation from http://learn.jquery.com/events/event-delegation/
.I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A small web app to manage todos">
<title>TO-DO jQuery Tests</title>
<!--src attribute in the <script> element must point to a copy of jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "article" ).on( "click","a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
</script>
</head>
<body>
<div id="test-container">
<article>
Link 1
</article>
</div>
</body>
When I click on Link2 I get no output on the console? Why isn't the event-handling working?
You have to bind to the closest static parent.
This case test-container.
$( "#test-container" ).on( "click","article a", function() {
// your code
});
The problem is that the second link is added dynamically and the click binding happens before the second link exists. That's why it has no affect on it.
Your code should look like this (instead of $(document) you can also use any static parent container as Ricardo pointed out):
$(document).ready(function() {
$(document ).on( "click","article a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
I have a document called "info.html".
it have 5 pages:
food
toys
entertainment
smartphones
electronics
I want that once a page loads, jquery send a request to the server for information about this item.
I all need to know is how to trigger this function?
Tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CoCouppn!</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$(document).on("pageshow", function() {
alert($(this).attr('id'));
});
</script>
</head>
<body>
<div data-role="page" class="pge" id="food">
food
</div>
<div data-role="page" class="pge" id="toys">
toys
</div>
<div data-role="page" class="pge" id="entertainment">
entertainment
</div>
<div data-role="page" class="pge" id="smartphones">
smartphones
</div>
<div data-role="page" clsas="pge" id="electronics">
electronics
</div>
</body>
</html>
It alerts "undifined" instead of page ID.
What is the problem?
Note that pageshow is deprecated in jQuery Mobile 1.4: http://api.jquerymobile.com/pageshow/
Note also that $.mobile.activePage is deprecated.
If you want to get the active page ID, you can do:
$.mobile.pageContainer.pagecontainer( 'getActivePage' ).attr( 'id' );
or
$('body').pagecontainer( 'getActivePage' ).attr( 'id' );
or
$(':mobile-pagecontainer').pagecontainer( 'getActivePage' ).attr( 'id' );
I do not personally recommend the latter two, as you are free to set a different pagecontainer, which in fact I do in Jasmine tests.
Note that the page must really be active first (it is not active yet in pagecreate, for instance).
pagechange event and retrieve page's id from data object.
$(document).on("pagechange", function (e, data) {
var page = data.toPage[0].id;
});
Demo
pageshow:
$(document).on("pageshow", function (e, data) {
var page = $(this)[0].activeElement.id;
});
Demo
You can get the current page information in a shorter and clearer way:
$(".ui-page-active").attr("id")
This is just a variation from the code shown here: http://demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/#&ui-state=dialog
Try $(document).ready( function ), $(document).ready allows you to execute a code in jQuery only when the page is loaded.
If you want to use pagecreate event, use this.id
$(document).on(
"pagecreate",
'#page_1, #page_2',
function(event) {
var pageId = this.id;
...
}
);
I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});
The following code will only let me drag and drop ONE clone onto a droppable area. When I try and drop another clone on the droppable area it disappears. I am able to drag it however.
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
Following the comments from people and the jfiddle provided below, it appears as though this snippet of code is working in a typical setup, however, I am using this in combination with Phonegap and more specifically on an Android device.
I know this is more specific and harder to replicate for other people, but for some reason it will not allow me to drag another clone onto the wrapper still.
Here is my entire code, if someone can spot something, i'd really appreciate it!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Figured it out.
I had the shape being cloned nester in the wrapper div. That won't work.
Took it out and it works!