How to prevent scrolling page up/ down when closing jQuery dialog? - javascript

I made a Shiny application and I'm using dialog (jQuery) for it.
The problem is that, when I close the dialog, the page goes to the top and I would like it to stay in the same position when I close the dialog.
The problem is that, when I close the dialog, the page goes up or down (as if it adjusted the screen position). I didn't want that to happen. I want the page to stay in the same position when I close the dialog.
When I open the dialog there are no problems, only when I close it.
My code:
<head>
<script src='https://code.jquery.com/ui/1.13.0/jquery-ui.js'></script>
<script>
$(function() {
$('#text1').hide();
$('#text1').dialog({
autoOpen: false
}, {
modal: true
}, {
title: 'Bird'
}, {
width: 50
}, {
resizable: false
}, {
show: 'explode',
hide: 'explode'
}, {
closeText: null
},
///background-color header
{
open: function() {
$('.ui-dialog-titlebar-close').hide();
}
}
).prev('.ui-dialog-titlebar').css({
'background-color': '#f8d40c',
'color': '#333333',
'text-align': 'center',
'display': 'block',
'margin': 'auto',
'border-radius': '5px',
'font-size': '25px'
});
///background-color body
$('#text1').css('background-color', '#e3d47f');
$('#click1').on('click', function() {
$('#text1').dialog('option', 'position', {
at: 'left top',
of: this // this refers to the cliked element
}).dialog('open');
return false;
});
$('body').on('click', '.ui-widget-overlay', function() {
$('#text1').dialog('close');
});
});
</script>
<style>
.class1 {
margin-bottom: 100px;
}
</style>
</head>
<body>
<p class='class1'>Point</p>
<p class='class1'>Point</p>
<p id="text1">Open dialog</p>
<p id="click1" class='class1' style='color:red'>Click here</p>
</body>
Shiny App is a SPA (Single Page Application).

Related

The requested content cannot be loaded-fancybox

I have radio button code below, when I clicked on that need to open fancybox modal window but while clicking it is saying 'the requested content cannot be loaded'.
$(document).ready(function(){
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function(){
$('#quicksearch').on('click', function(){
$('#cncstorepane').css('display','block');
});
},
afterClose: function(){
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) {
$('#radio_check').addClass('radio_chk');
});
});
Radio button code:
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
Content div to load in fancybox modal window:
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
Does anyone have any idea instead of loading the content why it's throwing an error.

Multiple animations jQuery - adding padding and displaying another div

I guys,
So I have a sidebar that I want to slide in and out when a user clicks a button. When that sidebar slides out, I want the body of the page to add a padding so that the sidebar doesn't hide the page content. I have it working, it's just the animation is very jumpy. Any suggestions. Here is what I have.
var userQueueVis = false
$(document).on('click', '#user-queue-button', function() {
if (userQueueVis == false) {
$('.user-queue').show('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '200px' }, { duration: 200, queue: false });
$("#user-queue-button").addClass("active-button");
userQueueVis = true;
} else {
$('.user-queue').hide('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '0px' }, { duration: 200, queue: false });
$("#user-queue-button").removeClass("active-button");
userQueueVis = false;
}
});
My snippet is not complete according to your needs but it gives you hit points what to do next, it toggle (show and hide) the sidebar (background red) along with adding padding to the specified parent div (#main). Hope this help.
$(document).ready(function(){
$('button').click(function(){
$("#sidebar").toggle("slide",function(){
$("#main").toggleClass("padding_10px");
});
});
});
#main{border:1px solid blue;}
#sidebar{
height:100vh;
width:250px;
background-color:red;
}
.padding_10px{padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<button>Click me!</button>
<div id="sidebar">
</div>
</div>

How to fit html page in pop up window (dialogue box) without using scrollbar?

I am newbie to JS/Html world and trying to load a html page in popup/dialog window on clicking some text in html but loaded page is bigger than poppup window size so there is scroll-bar.
Javascript/Jquery code
$(document).ready(function(){
$('.showModal2').click(function(){
$('#popup2').dialog({width: 450,height: 450});
});
});
$(function(){
$("#data").load("frontend/js/page.html");
});
Html code
<div id="popup2" title="Results" style="display:none;">
<div id="data" style="min-width: 200; height: 400; max-width: 400; margin: 0 auto"></div>
</div>
<font color="blue">Link</font>
Is there any way to fit page within popup/dialog window size (here l=450 & b=450) completely without using scroll-bar like cropping page?
Try this.
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: "auto"
});
$(".dialogify").on("click", function(e) {
e.preventDefault();
$("#dialog").html("");
$("#dialog").dialog("option", "position", {
my: "center",
at: "center",
of: window
});
if ($("#dialog").dialog("isOpen") == false) {
$("#dialog").dialog("open");
}
});
});
Try this below code, it works for me:
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});

Jquery Dialog - Reuseable on manyimages

I'm using the Jquery UI Dialog box to make a popup for images on my page.
Currently for each image, I'm using the following:
<script type="text/javascript">
$("#myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#MyImageLink")
.click(function () {
$("#MyImageInfo").dialog("open");
});
</script>
My HTML,
<a id="MyImageLink" href="#">
<img src="blahblahblah.jpg"></a>
<div id="MyImage" title="Basic modal dialog">
<p><strong>Title Yah</strong></p>
<p>
<strong>Phone</strong>: ****<br />
<strong>Email</strong>:
</a>
</div>
My issue is I have about 10 of the pictures set up the same, each with thier uniqu ID's how can I use this script more efficiently so I only have to include it once? Thanks.
Id must be unique.But you can apply the same class name to more than one element.
You can give same class name to all those elements.and then use
$(".className").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
Okay You must not put same id multiple elems at same page, ids must have to be unique either postfix some counter values like MyImageLink1, MyImageLink2, MyImageLink3 or better option is to change id to class this way:
<a class="MyImageLink" href="#"><img src="blahblahblah.jpg"></a>
<div class="MyImage" title="Basic modal dialog">
.......
</div>
Script:
<script type="text/javascript">
function dialg(e){
e.preventDefault();
$(".myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
}
$(function(){
$(".MyImageLink").on('click', dialg);
});
</script>

JQuery Bubble Popup: innerhtml hidden div

I'm using the JQuery Bubble Popup library, trying to show a hidden div in the innerHtml variable. Right now I have this:
<div class="button"> Show stuff </div>
<div class="information"> foo </div>
<div class="button"> Show stuff </div>
<div class="information"> bar </div>
<script>
$(document).ready(function(){
$('.information').hide();
$('.button').CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', 'text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true,
});
});
</script>
The thing is, it isn't working as I expected, the problem is in the line
innerHtml: $(this).next(".information").html(),
Because if I put this it works:
innerHtml: 'testing jquery bubblepopup',
The problem with this line:
innerHtml: $(this).next(".information").html(),
is that this is not referring to what you think it refers to. I think you want it to refer to the current button being affected, but it doesn't - it's the this value that's in effect in the "ready" handler context.
What you can do (among several things) is use the ".each()" function:
$('.button').each(function() {
$(this).CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', 'text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true
});
});
Also you've got a stray comma at the end of the bubble popup parameter object, which will get you an error from IE.

Categories