I have a HTML form which is a popup. When the user click the button, form will get appear at the same page.
But this code doesn't work in Wordpress post:
<a href="javascript: void(0)" onClick="OpenPopup();">
<img border="0" src="submit.jpg">
</a>
What should I do for this?
Iexplore doesn't support onClick, may be you can do this by creating a jQuery function :
Add ID first:
<img id='image_id' border="0" src="submit.jpg"/>
Then, jQuery function:
<script>
$(document).ready(function(){
$('#image_id').click(function(){
OpenPopup();
});
});
</script>
Related
I am trying to create custom button for pinterest. I was able to use a custom image as a button but it is not working properly.
Here is the CSS I am using.
span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
content: url('../images/icon.png');
}
In the ScreenShot I have marked the button I am working on using red color. I have marked the areas I want to get rid off using blue color.
I am stuck on this problem for more than 12 hours. So, any help will be really appreciated.
You can get the Pinterest Button Using these codes
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
For custom button
The data-pin-custom="true" attribute is important because it keeps your custom markup, including your HTML and CSS.
<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonBookmark"
data-pin-custom="true">
--YOUR CUSTOM HTML--
</a>
--YOUR CUSTOM HTML-- Given likes as below
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
<p>Ordinary button</p>
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<p>Custom button</p>
<a data-pin-do="buttonPin" href="" data-pin-custom="true">
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>
For more information: Visit https://developers.pinterest.com/docs/widgets/save/?
Hello i am developing my own functionality plugin on wordpress and i am stuck on trying to pass a variable from a page to a modal that opens after a link is clicked displaying a delete confirm dialog
The link opening the modal is
<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
The Modal window code
<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?> </h2>
<p class="lead">This cannot be undone</p>
<a class="deleteButton button" href="#">delete</a>
<a class="close-reveal-modal">×</a>
</div>
How can pass $passing_var from the main page to the modal window?
Set Data Attibute
<a data-id="<?php echo $passing_var?>" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
Read data attribute to use in modal
$(document).on("click", ".deleteLink", function () {
var dataId = $(this).data('id');
$('#deleteModal').modal('show');
});
Finally got it working after a lot of trial and error and google research... nothing unexpected here... :(
So if anybody in the future needs to pass a variable from a page to a modal must follow three steps...
1.Create the modal button
<button data-reveal-id="myModal" data-my-number="1">First One</button>
2.Add the Modal Dialog
<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>. It is mine.</p><a class="close-reveal-modal">×</a></div>
3.Add the Javascript
$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});
Please visit this link if you want to see a working example... thank you all
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>
I have a grid with edit option ,and on edit button click i need to redirect to an edit page .
the requirement is to get this edit page as a popup with background (prev page) greyed out.
i tried modal popup, but the controls are on a separate page .
i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .
Thanks
Rajat
i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...
plus i was looking for the answer of ur question and i came across this article where it says:
You May use Modal Popup Extender to open some part of the page as
Popup. But there we don't have any property to open other html or aspx
page in Popup window.
http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/
and also found people asking same question as you did and the response they got is here
use Iframe or user control
Is there a way to open another page using ModalPopup Extender?
and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...
hope this help ...
I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
Just an idea but what about using the jquery "contents()" function?
You could set an interval to look for an element within the iframe from the parent page.
(You're using .net so you could make it appear upon postback on the iframe's page).
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var watchForClose = setInterval(function () {
if ($('#testIframe').contents().find('#closeModal').length > 0) {
clearInterval(watchForClose);
/* call function to close modal here..*/
alert('Close modal');
};
}, 100);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
</div>
</form>
</body>
</html>
The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).
We can open an aspx as popup using IFrame as follows,
First take a button and provide onclick event as follows
<input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>
Next In the page provide a "Div" tag with id as follows
<div id="MyDialog">
</div>
Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME
function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}
The Four parameters are sent as follows URL,height,width,title
function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {
urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
url = urlBase + url;
$('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#MyDialog").dialog({
title: t,
modal: true,
autoOpen: true,
height: h,
width: w,
resizable: false,
position: ['right-10', 'top+30'],
closeOnEscape: false,
dialogClass: "alert"
});
}}
I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.
The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!
<script type="text/javascript">
$(function () {
$('#tabs').tabs();
});
</script>
<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">
<!-- Must have class= info to prevent flash of just content on refresh -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1" >Home</a></li>
<li><a href="#tabs-2" >Statistics</a></li>
<li><a href="#tabs-3" >Topo Maps</a></li>
<li><a href="#tabs-4" >FAQs</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/Home") </div>
<div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Statistics/Statistics")</div>
<div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Maps/Maps")</div>
<div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/FAQs")</div>
</div>
</div>
Here you have an example http://jsfiddle.net/YnZRa/1/
Steps
Add a new tab with <li
style="display:none;">Tab 4</li>
Add the content in a new div
Edit the script with this
//Edit the script this way to show the content with a click in a link
$(document).ready(function(){
var $tabs = $( "#tabs" ).tabs();
$('.goto').click(function() { // bind click event to link
$tabs.tabs('select', 3); // switch to fourth tab
return false;
});
});
Hope it works!! :)
If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register.
First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this
$('#tabs').tabs({ collapsible: true });
From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:
$('.login').click(function () {
var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
$("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab
// continue with your login/registration click event
});