I'm creating a website and on one page of the site (it's .php) I have two links. The first reads register and the next reads login. I am using jquery to create a popup and which form pops up depend on the link clicked. (I am trying to do this but not able to). I have 2 files in total (logReg.php) and (popup.css).
When I click on login the login form pops up as expected, but when i click on register nothing pops up. And if I reverse these that if I put the jquery code for register first then... the register box pops up but the login doesn't. I have read the click() function's jquery API but it seems to me i'm doing everything right but obviously not. Any help would be greatly appreciated. BTW This code is not 100% mine I modified the code that I found for a single popup window.
Content of logReg.php
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(document).ready(function () {
$("a.login-window").click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//fade in the popup
$(loginBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
Login
Register
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>
first don't use .live, upgrade jquery and use
$(document.body).on({event:function(){},...},"selector"
second don't use append, use
$('<div../>').appendTo($(document.body));
(i believe your bug comes from second)
also you could make a plugin of your open box code, then you bind the two at once using.on
For starters you are missing a double quote on this line:
<div id="links>
change to
<div id="links">
That should get your links fixed.
Then you should do what mikakun said about upgrading jquery and using .on as it is best to stay current.
Related
This question already has an answer here:
Jquery - Close dropdown/remove active class when clicking outside or clicking another dropdown
(1 answer)
Closed 4 years ago.
I get this code (it is not written by me)
Problem that I am not able to solve is:
To hide that iframe - I need to click the same button again and I would like to hide it on clicking somewhere else - something like toggle()
For now I tried to create new code with toggle, but I had problems with getting the right id, which is saved in clicked button id,
I also tried to base my new code on answer here :
.on() & toggle working together
and jQuery on('toggle') possible?
My code - It displays an iframe from a dynamically created link, when you click the button in the datatable column.
$("#example tbody").on("click", "a.actions", function() {
const id = $(this).attr('href');
let clicks = $(this).data('clicks');
if (clicks) {
$('#' + id).css("display", "none");
} else {
$('#' + id).css("display", "block");
}
$(this).data("clicks", !clicks);
let src = 'https://web02.datacentre.local/master-database/master-task-view-actions/entry/' + id;
$('#' + id).attr('src', src);
return false;
});
You can do this:
$(document).ready(function() {
$("button").click(function() {
$("div.d1").toggle();
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button>Toggle</button>
<div class="d1" style="border:1px solid black;padding:10px;width:250px">
<p><b>This is a little poem: </b><br/> Twinkle, twinkle, little star<br/> How I wonder what you are<br/> Up above the world so high<br/> Like a diamond in the sky<br/> Twinkle, twinkle little star<br/> How I wonder what you are</p>
</div>
ORIGINAL QUESTION:
I am trying to create some javascript to add to a form in Microsoft Dynamics CRM.
I have the following script which I have assigned to the forms onLoad event:
$(document).ready(function () {
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
The following is a stripped down version of the forms HTML
<div id="divHeader">
<div id="Div1"></div>
</div>
<div id="divMain"></div>
When the form loads, what should happen is this:
<div id="divHeader">
<div id="Div1"></div>
<div id="Div2">Some Data Here</div>
</div>
<div id="divMain"></div>
That does happen. However, the problem is that the divHeader and divMain do not resize, so the newly added Div2 can't be seen unless the user scrolls down within the divHeader.
If I add an alert:
$(document).ready(function () {
if ($('#CheckBox1').is(':checked')) {
alert("Random alert");
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
The whole thing works perfectly. How do I get this to work without the alert?
UPDATE 1:
setTimeout also works instead of using an alert.
$(document).ready(function () {
setTimeout(function () {
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
}, 5000);
});
So it seems $(document).ready doesn't seem to do it's job properly. In both cases alert or setTimeout, the form gets extra time to finish loading before the div tags are resized.
It is entirely unsupported to do DOM manipulations in Dynamics CRM. See Do Not Access the DOM.
You will instead need to use supported methods of manipulating the form (i.e. Xrm.Page). While it is not possible to dynamically add/remove content on a CRM-form, you can show and hide elements. As I understand it, you are trying to show some content if a boolean field (presented as a checkbox) on the form is true.
This can be done by adding the control that you want to show/hide to your form (that control can either be one of the standard CRM-fields or a custom web resource, depending on your requirements). You would then write a bit of JavaScript to show/hide the control in question when your boolean attribute changes its value:
function onload() {
Xrm.Page.getAttribute("booleanField").addOnChange(showMoreStuffInHeader);
showMoreStuffInHeader();
}
function showMoreStuffInHeader() {
var visible = Xrm.Page.getAttribute("booleanField").getValue();
Xrm.Page.getControl("someDataHereControl").setVisible(visible);
}
Use Jquery Plugin Wait until element exists Pluging will wait for element to appear in DOM and then fire given handler function.
$(document).ready(function () {
$('#CheckBox1').waitUntilExists(function () { // OR $('#Div1').waitUntilExists(function ()
if ($('#CheckBox1').is(':checked')) {
$('<div id="div2">Some Data Here</div>').insertAfter("#Div1");
$('#divHeader').height('+=25px');
var newtop = $('#divMain').position().top + 25;
$('#divMain').css('top', newtop + 'px');
}
});
});
I have table cell with a javascript/css content box that pops up upon mouseover.
There are 20 cells on the page. Everything is working correctly, in that when you mouseover the product link, you see the content box. However, I want to put a LINK inside the content box that the user can click on if they choose. So, the popup box has to stay up long enough for the user to mouseover to click the link.
Really, I want the OnMouseOver to stay open until either a second or two has gone by and/or the user OnMouseOver's another cell.
The problem I'm having is that the pop up box doesn't stay open (due to OnMouseOut) to click the link. If I turn OnMouseOut off (which I tried), then all the pop up boxes just stay open, so this doesn't do the job either.
My CSS looks like this:
<style type="text/css" title="">
.NameHighlights {position:relative; }
.NameHighlights div {display: none;}
.NameHighlightsHover {position:relative;}
.NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;}
</style>
And the html:
<td>
<span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
<a href="product review link>See User reviews</a>
</div>
</span>
</td>
So, how can I make the pop up box stay open long enough to click on the link, but also make it disappear if another content box is activated?
Thanks in advance.
You have to improve your HTML markup for this task, need to get rid of inline event handlers:
<span class="NameHighlights">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
See User reviews
</div>
</span>
Then you have to bind your events to all .NameHighlights spans:
var span = document.querySelectorAll('.NameHighlights');
for (var i = span.length; i--;) {
(function () {
var t;
span[i].onmouseover = function () {
hideAll();
clearTimeout(t);
this.className = 'NameHighlightsHover';
};
span[i].onmouseout = function () {
var self = this;
t = setTimeout(function () {
self.className = 'NameHighlights';
}, 300);
};
})();
}
http://jsfiddle.net/3wyHJ/
So the idea is to use setTimeout method.
Notes: I used querySelectorAll which is not supported by IE7, if you need to support it then you can use any of implementations of the getElementsByClassName method.
In case anyone is looking for a jQuery version of the accepted answer:
var t;
$(function(){
$('span.NameHighlights').mouseover(
function(e){
hideAll();
clearTimeout(t);
$(this).attr('class', 'NameHighlightsHover');
}
).mouseout(
function(e){
t = setTimeout(function() {
//$(this).attr('class', 'NameHighlights');
hideAll();
}, 300);
}
);
});
function hideAll() {
$('span.NameHighlightsHover').each(function(index) {
console.log('insde hideAll');
$(this).attr('class', 'NameHighlights');
})
};
jsFiddle
I am trying to display a fancy html popup/frame (not windows style) to the customer when a particular form is submitted. Not sure what would be the best way of doing that!
I tried something with the code below but there are 2 issues with this. Firstly the box that comes as a popup looks like a windows popup box (browser type) which I don't want. I just want a simple square box where I can add colors, image etc. Another problem is that my links within this code are not working. For eg. I want one of the links to take me to another page on the site after closing the message box, and the other link could simple be used to close the box... or may be just 2 links that could take me to 2 different pages!
<form action="do.something" method="post" onsubmit="return action_submitted();">
<script type="text/javascript">
function action_submitted() {
HTML = '';
HTML += '<html><head><title>New Action</title></head>';
HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
HTML += 'Congrats, your action was successful! <br/>';
HTML += 'Close Message<br/>';
HTML += 'There<br/>';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';
var w = 500;
var h = 200;
var l = (screen.availWidth - w) / 2;
var t = (screen.availHeight - h) / 2;
actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');
if (actionwin && !actionwin.closed) actionwin.focus();
return true;
}
</script>
Please help :)
Many thanks!
try using jquery modal dialog:
var modal = "<div id='modal_pop'>" +
"<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
"<p>This is a fancy modal pop up.</p>" +
"</div>";
and call the modal dialog
$(modal).dialog({
modal: true,
width: 400,
height: opts.windowHeight,
closeOnEscape: false,
draggable: false,
resizable: false,
zIndex: 99999,
bgiframe: true,
title: Sample!',
buttons: {
"OK": function () {
// your action on OK clikc
$(this).dialog('close');
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
more info on this site.
I suggest you need to create popup div in HTML at bottom of body. Hide popup by default By CSS and when you want to open it, then make it visible by javascript and pass content you do want to display if you have dynamic content.
HTML
<div id="popupWrapper">
<div id="popup">
content goes here
</div>
</div>
CSS
#popupWrapper { display: none;}
jQuery
$('#button').live('click', function() {
$('#popup').text('content goes here');
$('#popupWrapper').fadeIn();
});
Because in your case you are creating poup every time you click on button. which is not good way to do it.
Also don't use any other plugin because it's not good to use third party plugin for simple stuffs like that. It's make your project more complicated and slow. Because they design for multiple situations with multiple options, and if you not need that mean it's worth to use that plugin.
I have a script that slides a div down from behind the menu, when people click on the tab. However its in jquery and I want to use mootools (lots of reasons I wont go into here). However im stuck with mootools 1.1 at present. But for some reason my attempt is not working :(
The html
print("code sample");
<div id="panel">
<form action="">
< form here >
</form>
</div>
<div class="slide">
<p class="sl"><span></span></p>
Div id panel holds the form which slides down, div class slide and the P tag is replaced by a tab/button which hangs down via css, clicking on this slides the tab down.
The jquery (which works fine)
print("code sample");
<script type="text/javascript">
$j(document).ready(function(){
$j(".btn-slide").click(function(){
$j("#panel").slideToggle("slow");
$j(this).toggleClass("active"); return false;
});
});
</script>
My moo attempt
print("code sample");
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Like I said above I am restricted to moo 1.1 at present, but if there is a answer that will work with both 1.1 and 1.2 or if its a similar change I would be grateful to hear, as it will be updated at some point.
Will this work?
function toggleSlide(){
var theSlider = new Fx.Slide('slide');
$('theSlide').addEvent('click', function(e){
e = new Event(e);
theSlider.toggle();
e.stop();
});
}
This should work both in 1.11 and 1.2:
window.addEvent('domready', function() {
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e) {
e = new Event(e); // this isn't needed in 1.2
e.stop();
mySlide.toggle();
this.toggleClass('active');
});
});
However, in MooTools 1.2 and later, Fx.Slide isn't included in the core – you'll have to download it as a part of MooTools More.
A working demo: http://jsbin.com/ewasa