I have wright a code for open a modern pop window in asp.net that code is working good. but i also want to open pop window using select a data from deopdown list. here is a code which i have wright for open pop window when user click on button but how can i open pop using select Item from dropdonwn list that pop up says Upgrade Membership.
<asp:DropDownList ID="ddWeek" class="contact-input" runat="server" Width="400px"
AutoPostBack="True" OnSelectedIndexChanged="ddWeek_SelectedIndexChanged">
</asp:DropDownList>
<div id="modal">
<div id="headingpop2">
Select You Plane for Upgrade Membership
</div>
<div id="contentpop2">
<p>Select you plan as per you like to Upgrade</p>
<a runat="server" href="Becomeamember.aspx"
class="buttonpop green close" style="margin-top: 140px; margin-right:
230px;">
<img src="images/tick.png">Upgrade Now</a> <a style="margin-top: 140px;
margin-right: 50px;"
href="#" class="buttonpop red close">
<img src="images/cross.png">Cancel</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#button1').click(function (e) { // Button which will activate our modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background
// will modal close?
dismissmodalclass: 'close' // the class of a button or
//element that will close an open modal
});
return false;
});
});
</script>
This code is working with Button but i want it will work with dropdownlist too. any one have a any idea how can i do this please help me out.
Thank You
Related
I am trying to add 3 onclick popups to one page. But it seems as soon as I add the second one the first one stops working. I renamed them different and still wont work. Please help.
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("show");
}
</script>
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunction()">
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
Your span content were not valid HTML - you cannot wrap a div in a span - and </br> is the wrong way around - should be <br/> if you want the XHTML slash
Here is the recommended way
target the container (delegate/delegation)
use the class of the clickable element
use a data- attribute to name the element you want to access when clicking
Alternatively use erlative addressing by wrapping each item in a yet another container div and use tgt.closest(".parentClass").querySelector(".popupClass") to access the popup
Here I use the data-attributes - as you can see it does not matter if the popup is a span or a div in this case.
window.addEventListener("load", function() { // on page load
document.getElementById("container").addEventListener("click", function(e) { // clicking anything in the container
const tgt = e.target;
if (tgt.classList.contains("tooltip")) { // we clicked a tooltip
const show = tgt.dataset.pop; // getting the data-pop content
document.getElementById(show).classList.toggle("hide");
}
})
})
.hide {
display: none;
}
<div id="container">
<span class="tooltip" data-pop="myPopup1">Look</span>
<div class="amount">$234.41</div>
<span class="tooltiptext hide" id="myPopup1">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
<hr/>
<span class="tooltip" data-pop="myPopup2">Look</span>
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</div>
<div class="tooltipstext hide" id="myPopup2">Fur Baby Of The Month
<img src="https://www.capebretoncares.com/images/search-icons/duck.png"> congratulations "Fluffy"
</div>
</div>
If you want to close when clicking elsewhere, you can again use addEventListener and test that the target is not the popup and not the popup link and then close all open popups. That code is a little more complex
I have gridview where i am editing row in a separate popup window by using a jquery ui dialogue.My question is Can we have a seperate window for each row edit in gridview.I am using a usercontrol for adding data and same user control is used in popup window by using different DIV
i am posting code what i have done
This is where i am entering data in to database,DIV is addID user control is TestUserControl
<div id="addID" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<uc1:TestUserControl runat="server" ID="idAdd" />
<div>
</div>
This is the div ,idMain responsible for editing which i will popup in jquery dialgue
<div id="idMain" style="display: none; background-color: #EEEEEE" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="updatePnlEdit" runat="server">
<ContentTemplate>
<div id="iForm" class="divRow">
<div class="divRow">
<uc1:TestUserControl runat="server" ID="IdUserControl" />
<div>
following is the jquery i am using to popup
function showIdDetails(divobj, pagetitle, width, height) {
$("#" + divobj)
.dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: pagetitle,
appendTo: "form",
modal: false,
draggable: true,
resizable: true,
width: width
})
Finally i will call showIdDetails function in gridview row command as like shown below
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "alert", "showIdDetails('idMain','ID DETAILS','600','400');", true);
As of now what is happening is foreach edit click i am popping up single window which contains the row i clicked.And what i want is foreach click i want to popup seperate window contains corresponding row,how to do it?
How do I remove or cancel an animation, when I click on a div it opens a second div with a sub menu that is fine, the thing is that I have added a sub menu and it shows when hover but if I click on any link on the hover link it opens the second div...
<div class="togger">
Nice Title
<div class="sub-menu-hover">
Some page
</div>
</div>
<div class="hiden-menu">
Some page
</div>
So when I click on "Nice Title" it display the ".hiden-menu", that is fine, when I hover on "Nice Title" it display the ".sub-menu-hover" also is fine, the problem is when I click on any menu "a" tag inside the ".sub-menu-hover".
What it does is that it opens the ".hiden-menu" and I don't want that...
I notice that when I click to whatever is inside ".toggler" it add a class ".active" and it opens the ".hiden-menu", so how can I prevent that when someone click inside ".sub-menu-hover"? it should only take you to whatever link you click on...
I did this
<script>
(function($) {
$(".sub-menu-hover").click(function(){
$('.toggler').removeClass('active');
})
})(jQuery);
</script>
but didn't do anything...
$(".togger p").click(function() {
$(".hiden-menu").toggle();
$(".sub-menu-hover").hide();
});
$(".togger p").mouseover(function() {
$(".sub-menu-hover").show();
});
$(".togger p").mouseout(function() {
$(".sub-menu-hover").hide();
});
.sub-menu-hover,
.hiden-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="togger">
<p>Nice Title</p>
<div class="sub-menu-hover">
hover Some page
</div>
</div>
<div class="hiden-menu">
click Some page
</div>
I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>
This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});
I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.
If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick
I have problem with keeping the active according open after the post-back of ASP.NET page.
Here's the script:
$(document).ready(function() {
$('.accordionButton').click(function() {
//Remove the "accordionOn" calss from all button
$('.accordionButton').removeClass('accordionOn');
//Close all open divs
$('.accordionContent').slideUp('normal');
//Open the div
if ($(this).next().is(':hidden') == true) {
//Add the "accordionOn" class to the button
$(this).addClass('accordionOn');
//Open div
$(this).next().slideDown('normal');
}
});
});
Here's the mark-up:
<div id="accordionWrapper">
<div class="accordionButton">
Hearder 1</div>
<div class="accordionContent">
Content 1
<asp:Label ID="lblName" runat="server"></asp:Label>
<br />
<asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />
</div>
<div class="accordionButton">
Hearder 2</div>
<div class="accordionContent">
Content 2
</div>
<div class="accordionButton">
Hearder 3</div>
<div class="accordionContent">
Content 3
</div>
</div>
I'd like to persist the active accordion, the current open div, to stay open during the post-back of ASP.NET.
Thank you.
Post back index of selected pane, and restore on page load as
$('.accordionButton').eq(index).click()
You could save the accordion position in a cookie and then retrieve it with on page load and set it with something like:
$('.accordionButton').eq(index).click()
Look here on how to set/get a value in a cookie in javascript
You should save the selected pane, and select it with javascript on page load:
$(document).ready(function(){
$('.accordionButton').eq(<%= SelectedPane %>).click()
});
Or, you could youse hashes in you url as facebook does, but it'd be more complicated.
Hope this helps. Cheers
The index value can be boolean or integer
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=AccordionIndexHidden.ClientID %>').val());
if (activeIndex < 0)
activeIndex = false;
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=AccordionIndexHidden.ClientID %>').val(index);
}
});
});
</script>
Remember to start with index less than 0
<asp:HiddenField ID="AccordionIndexHidden" runat="server" Value="-1" />