jQuery.noConflict() is not working for popup box - html

I am having a webpage with 3 slider and one popup box. For sliders i used jQuery.noConflict() so that is working fine. but in the case of popup box if i am using jQuery.noConflict() its not working.
If i am not using jQuery.noConflict() then my slider wont work.
popup html
<div id="popupContact">
<a id="popupContactClose"><img src="close.gif" alt="close"/></a>
<div id="contactArea"></div>
</div>
<div id="backgroundPopup"></div>
popup jquery
var popupStatus = 0;
function loadPopup(){
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.2"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
function disablePopup(){
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css({
"height": windowHeight
});
}
var $rp = jQuery.noConflict();
$rp(document).ready(function(){
$rp("#buttonpop").click(function(){
centerPopup();
loadPopup();
});
$rp("#popupContactClose").click(function(){
disablePopup();
});
$rp("#backgroundPopup").click(function(){
disablePopup();
});
$rp(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Note: This popup jquery is an external jquery and i am using <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> also.
Thank you.

If you use jQuery.noConflict(), that prevents jQuery from aliasing jQuery as $. However your popup code is still trying to use $.
Either reference jQuery, not $, or wrap your code in a closure and reference $ as a local variable within the closure, i.e.
(function($) {
//popup code here
})(jQuery);

Related

A blank card when put inside modal

I'm using this code : http://codepen.io/andytran/pen/xweoPN/ to create an information card slider but i think the code <div class="card"> is having some problems when put in a modal.
I've created a pen with my current code, Kindly review it and suggest the changes to remove that blank card while clicking on the modal. https://codepen.io/anon/pen/bWmYxN
In the first card a blank card with the text how it works is present, how to remove that blank card?
I am not quite familiar with the libraries that you used here. But anyway, something like this can fix your issue if nothing else works out.
$("#modalBtn").click(function() {
setTimeout(
function(){
$("#next").click();
}, 250
);
});
EDIT:
Sorry about that, I forgot that you should add an ID to your button that calls the modal.
<button id="modalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
you just need to put this code only in $(document).ready
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
so your jquery code will be
$(document).ready(function() {
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
var getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
function calcProductHeight() {
getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
}
function animateContentColor() {
var getProductColor = $('.product.active').attr('product-color');
$('body').css({
background: getProductColor
});
$('.title').css({
color: getProductColor
});
$('.btn').css({
color: getProductColor
});
}
var productItem = $('.product'),
productCurrentItem = productItem.filter('.active');
$('#next').on('click', function(e) {
e.preventDefault();
var nextItem = productCurrentItem.next();
productCurrentItem.removeClass('active');
if (nextItem.length) {
productCurrentItem = nextItem.addClass('active');
} else {
productCurrentItem = productItem.first().addClass('active');
}
calcProductHeight();
animateContentColor();
});
$('#prev').on('click', function(e) {
e.preventDefault();
var prevItem = productCurrentItem.prev();
productCurrentItem.removeClass('active');
if (prevItem.length) {
productCurrentItem = prevItem.addClass('active');
} else {
productCurrentItem = productItem.last().addClass('active');
}
calcProductHeight();
animateContentColor();
});
// Ripple
$('[ripple]').on('click', function(e) {
var rippleDiv = $('<div class="ripple" />'),
rippleSize = 60,
rippleOffset = $(this).offset(),
rippleY = e.pageY - rippleOffset.top,
rippleX = e.pageX - rippleOffset.left,
ripple = $('.ripple');
rippleDiv.css({
top: rippleY - (rippleSize / 2),
left: rippleX - (rippleSize / 2),
background: $(this).attr("ripple-color")
}).appendTo($(this));
window.setTimeout(function() {
rippleDiv.remove();
}, 1900);
});
});
Thats it
Hope this helps
The problem was I forgot assigning the active class to the product class
<div class="product-active">
this will make the first screen to appear and if there's no active class, then it'll show a blank screen since it doesn't know what to show. A small typo got me on feet. Anyways, this is for the future reference if anyone makes a silly mistake like this.
Thanks.

Angular - append html through different frames with one module per frame

My code have the main windonw and one iframe and each one with your module. A button in main window fires click event that should append html into iframe, the new html when appended into that should apply interceptors and directives properly, but it doesn't work!
Angular javascript:
angular.module('module1',[]).controller('Controller1', function ($scope) {
$scope.get = function(){
$http.jsonp("some_url_here").success(function(html){
$scope.content = html;
});
}
}).directive('click', function($compile) {
return {
link: function link(scope, element, attrs) {
element.bind('click',function(){
var unbind = scope.$watch(scope.content, function() {
var div=document.getElementById("frame").contentWindow.angular.element("divId");
div.append($compile(scope.content)(div.scope()));
unbind();
});
});
}
}
});
angular.module('module2',[]).directive('a', function() {
return {
restrict:'E',
link: function(scope, element, attrs) {
console.log('ping!');
console.log(attrs.href);
}
};
});
Html code:
<html ng-app="modile1">
<div ng-controller="Controller1">
<button type="button", ng-click="get('any_value')", click:""/> Load frame
</div>
<iframe id="frame" src="/please/ignore/this">
<!-- considere the html as appended from iframe-src and contains ng-app="module2" -->
<html ng-app="module2">
<div id="divId">
<!-- code should be inject here -->
</div>
</html>
</iframe>
</html>
Please, considere that angularjs, jquery if applicable, modules-declaration as well as headers are loaded properly.
I'd like to load the html content from main-frame/window into iframe and run interceptors and directives properly. Is it possible? If yes, how can I do it?
Thanks for advancing!
I've tried this code and it seems work fine! I found it here: http://www.snip2code.com/Snippet/50430/Angular-Bootstrap
var $rootElement = angular.element(document.getElementById("frame").contentWindow.document);
var modules = [
'ng',
'module2',
function($provide) {
$provide.value('$rootElement', $rootElement)
}
];
var $injector = angular.injector(modules);
var $compile = $injector.get('$compile');
$rootElement.find("div#divId").append(scope.content);
var compositeLinkFn = $compile($rootElement);
var $rootScope = $injector.get('$rootScope');
compositeLinkFn($rootScope);
$rootScope.$apply();

How to customize datepicker dialog position while using jQuery UI?

I need to have dialog box under the input field. The default behavior - to display above the filed. Tried to customize it using dialog method - haven't worked. What is the proper way to do it?
<script>
$(function() {
$( "#adv-issue-date" ).datepicker();
var handler = function() {};
var dp-settings-param = "";
var dp-pos = [100, 200];
$( "#adv-issue-date" ).datepicker( "dialog", "10/12/2012, handler, dp-settings-param, dp-pos" );
});
</script>
UPDATE:
The datepicker dialog is not showing because of empty handler. This way also does not works :
var handler = function() {$( "#adv-issue-date" ).datepicker("show");};
Modify .ui-datepicker in the CSS file.
If you want to manually move the datePicker around:
$(document).ready(DocReady);
function DocReady()
{
$("#adv-issue-date").datepicker({ beforeShow: moveDatePicker });
}
function moveDatePicker(input, inst)
{
inst.dpDiv.css({ marginLeft: "200px", marginTop: "200px" });
}

How to use divs as radio button selectors for hidden field with jquery?

I'm trying to create a good looking product order form with jquery skills.
I have some shoe size values as like divs:
<div id="select-size">
<div id="size-value-19">39</div>
<div id="size-value-20">40</div>
<div id="size-value-21">41</div>
<input type="hidden" name="option[229]" id="option-size" value="">
</div>
When a customer clicks on a shoe size numbers it should take the size-value-?? part from div id and put it into #option-size hidden field.
How can I do that?
BTW: I had found a prototypejs example for this work but prototype and jquery can't work together properly.
Let me give the prototype example code for you:
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
function deActivate(elt) {
elt.removeClassName('active');
}
function watchClick(evt) {
var element = Event.element(evt);
if (element.hasClassName('outstock')) return;
$$('#select-size div').each(function(elt) {deActivate(elt)});
element.addClassName('active');
var eid = element.id.split('-')[2];
$('option-size').setValue(eid);
}
$$('#select-size div').invoke('observe', 'click', watchClick);
});
//]]>
</script>
I still can't believe that how js framework developers use same $ sign...
$('div').click(function(){
var id = $(this).attr('id');
$('#option-size').val(id);
});
Code presented by OP, translated to jQuery:
$(function() { // On DOM ready ...
var $sizes = $('#select-size div'), // Size elements
$input = $('#option-size'); // Hidden input
$sizes.click(function() { // On click on size element ...
var $this = $(this); // Reference to this element
if (!$this.hasClass('outstock')) { // If not out of stock ...
$sizes.removeClass('active'); // Remove .active on all
$this.addClass('active'); // Add .active on this
$input.val(this.id.split('-')[2]); // Set value in hidden field
}
});
});
(Updated demo)
On a general note:
You should be able to suppress jQuery's use of the $ symbol via the .noConflict() setting. However, it is advisable to translate the functionality into jQuery if this library is already present and you have no other use for prototypejs.
add jquery
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
and add this script to your page
<script type="text/javascript">
$(document).ready(function () {
$('#size-value-19').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-20').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-21').click(function () {
$('#option-size').val($(this).text());
});
});
</script>

Jquery Click Event Not Firing On First Click, but does on second click, why?

I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>