Javascript translation/explaination [closed] - javascript

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
If someone could be so kind and help me understand this script, it would be heavily appreciated.
What does it mean and what does it do?
<iframe style='display:none;width:0px; height:0px;' src='about:blank'
name='gform_ajax_frame_2' id='gform_ajax_frame_2'></iframe>
<script type='text/javascript'>
function gformInitSpinner_2() {
jQuery('#gform_2').submit(function () {
jQuery('#gform_submit_button_2').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_2" class="gform_ajax_spinner" src="content/plugins/gravityforms/images/spinner.gif" alt="" />');
jQuery('#gform_wrapper_2 .gform_previous_button').attr('disabled', true);
jQuery('#gform_wrapper_2 .gform_next_button').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_2" class="gform_ajax_spinner" src="content/plugins/gravityforms/images/spinner.gif" alt="" />');
});
}
jQuery(document).ready(function ($) {
gformInitSpinner_2();
jQuery('#gform_ajax_frame_2').load(function () {
var contents = jQuery(this).contents().find('*').html();
var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;
if (!is_postback) {
return;
}
var form_content = jQuery(this).contents().find('#gform_wrapper_2');
var is_redirect = contents.indexOf('gformRedirect(){') >= 0;
jQuery('#gform_submit_button_2').removeAttr('disabled');
if (form_content.length > 0) {
jQuery('#gform_wrapper_2').html(form_content.html());
jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top);
if (window['gformInitDatepicker']) {
gformInitDatepicker();
}
if (window['gformInitPriceFields']) {
gformInitPriceFields();
}
var current_page = jQuery('#gform_source_page_number_2').val();
gformInitSpinner_2();
jQuery(document).trigger('gform_page_loaded', [2, current_page]);
} else if (!is_redirect) {
var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message').html();
if (!confirmation_content) {
confirmation_content = contents;
}
setTimeout(function () {
jQuery('#gform_wrapper_2').replaceWith('<' + 'div id=\'gforms_confirmation_message\' class=\'gform_confirmation_message_2\'' + '>' + confirmation_content + '<' + '/div' + '>');
jQuery(document).scrollTop(jQuery('#gforms_confirmation_message').offset().top);
jQuery(document).trigger('gform_confirmation_loaded', [2]);
}, 50);
} else {
jQuery('#gform_2').append(contents);
if (window['gformRedirect']) gformRedirect();
}
jQuery(document).trigger('gform_post_render', [2, current_page]);
});
});
</script>
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery(document).trigger('gform_post_render', [2, 1])
});
</script>

To answer your question:
It checks the form to see if it's okay to render, if all needs are met, it renders the form in the iframe.
To know what element does what: research the Jquery Api and use some of your own brainlogic.

Related

Is there any way I can dry out this file? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Take a look at my files, the one thing that is bothering me for the moment is the repeated section and panel. I must not be able to see the bigger picture, so can anyone tell me a better and dryer method to code?
$(function() {
let pent = {
init : function () {
this.cacheDom();
this.bindEvents();
},
cacheDom: function () {
this.$el = $('#naver');
this.$button = this.$el.find('#xCancel');
this.$set = this.$el.find(".setting");
this.$section = [
this.$sectionA = this.$el.find('#set1'),
this.$sectionB = this.$el.find('#set2'),
this.$sectionC = this.$el.find('#set3'),
this.$sectionD = this.$el.find('#set4')
];
this.$panelA = this.$el.find('#settbox1');
this.$panelB = this.$el.find('#settbox2');
this.$panelC = this.$el.find('#settbox3');
this.$panelD = this.$el.find('#settbox4');
},
bindEvents: function () {
this.$button.on('click', this.hidePanel.bind(this));
this.$sectionA.on('click', this.showPanelA.bind(this));
this.$sectionB.on('click', this.showPanelB.bind(this));
this.$sectionC.on('click', this.showPanelC.bind(this));
this.$sectionD.on('click', this.showPanelD.bind(this));
},
showPanelA: function () {
this.$button.show();
this.$panelA.slideDown(100);
},
showPanelB: function () {
this.$button.show();
this.$panelB.slideDown(100);
},
showPanelC: function () {
this.$button.show();
this.$panelC.slideDown(100);
},
showPanelD: function () {
this.$button.show();
this.$panelD.slideDown(100);
},
hidePanel : function () {
this.$set.slideUp(100);
this.$button.hide();
},
};
pent.init();
});
Better code would be:
$('#xCancel').on('click', function() {
$('.setting').slideUp(100);
$(this).hide();
});
$('.set1').on('click', function() {
$('#xCancel').show();
$('.settbox').slideDown(100);
});
Just follow DRY principle and make things easier. I mean if you need to do the same operation for more elements, why you can't use class as universal selector?
On youtube are lots of tutorials or you can visit jQuery documentation website.

Converting code from jQuery to JavaScript doesn't get the same result [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have this piece of code in jQuery :
setTimeout(function () {
$('body .animate-box.item-animate').each(function (k) {
var el = $(this);
setTimeout(function () {
var effect = el.data('animate-effect');
if (effect === 'fadeIn') {
el.addClass('fadeIn animated-fast');
} else if (effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated-fast');
} else if (effect === 'fadeInRight') {
el.addClass('fadeInRight animated-fast');
} else {
el.addClass('fadeInUp animated-fast');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo');
});
}, 100);
I've tried to rewrite it using vanilla JS, but I don't get the same result. The value of the el element is different and this makes my web page refresh one time.
This is the code in JavaScript:
setTimeout(function () {
var index = 0;
document.querySelectorAll('body, .animate-box.item-animate').forEach( (k) => {
var el = k;
setTimeout(function () {
var effect = el.dataset.animateEffect;
if (effect === 'fadeIn') {
el.classList.add('fadeIn', 'animated-fast');
} else if (effect === 'fadeInLeft') {
el.classList.add('fadeInLeft', 'animated-fast');
} else if (effect === 'fadeInRight') {
el.classList.add('fadeInRight', 'animated-fast');
} else {
el.classList.add('fadeInUp', 'animated-fast');
}
el.classList.remove('item-animate');
}, ++index * 200);
});
}, 100);
Can any one tell me what I'm doing wrong?
I believe the correct conversion of this:
$('body .animate-box.item-animate')
should be this:
document.querySelectorAll('body .animate-box.item-animate')
and not this:
document.querySelectorAll('body, .animate-box.item-animate')
Explanation
This document.querySelectorAll('body, .animate-box.item-animate') will return all body elements (which are just one per page) and all elements which as the class animate-box.item-animate.
This document.querySelectorAll('body .animate-box.item-animate') will return all elements that are inside of the body element, which as the class animate-box.item-animate.

Check content css in javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
How can I check if the content in css is equal to mobile or desktop?
var push = document.querySelector('.push-button');
var result = getComputedStyle(push).content;
if ($('.push-button').css('content') == "mobile") {
$(document).ready(function () {
$('.main').css("color", "black");
});
} else if (result === "desktop") {
$(document).ready(function () {
$(".push-button").click(function () {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
});
});
}
Try to do this
if ($('.push-button').css('content') == "\"mobile\"") {
Information is not sufficient but Check if this can help you
var push = document.getElementByClass(".content");
if (matchMedia) {
const mq = push.matchMedia("(min-width: 1024px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$(document).ready(function() {
$(".push-button").click(function() {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
});
});
} else {
$(document).ready(function() {
$(".push-button").click(function() {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
);
});
}
}

Getting variable value out of jQuery [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Is there any way to extract value of a variable used in jQuery so that we can use it in JavaScript functions
<script>
var val;
$(document).ready(function() {$('.nav a').click(function(event)
{event.preventDefault();
val=$(this).index();
if(val==0){
$('#hide_main').hide();
$('.main_BSNS').animate({opacity:"show",height:"400px"},'slow')
}//if val==0 ends here
else if(val==1){
$('#hide_main').hide();
$('.main_ACTNT').animate({opacity:"show",height:"400px"},'slow')
}
else if(val==2){
$('#hide_main').hide();
$('.main_devp').animate({opacity:"show",height:"400px"},'slow')
}
});
});
function getCookie(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("BSNS");
if (username!=null && username!="")
{
$('#hide_main').hide();
$('.main_BSNS').animate({opacity:"show",height:"400px"},'slow')
}
else
{
alert(val);
if (username!=null && username!="")
{
setCookie("BSNS",username,365);
$('#hide_main').hide();
$('.main_BSNS').animate({opacity:"show",height:"400px"},'slow')
}
}
}
</script>
now i want this checkCookie() function to be called by but the alert always show up with an undefined value (as many users predicted) but i am unable to find a solution to this and to write these cookies...(finally i am successful atleast to put my code on this website :-) )
Try fixing the syntax error caused by the missing brackets after myFunction. This will then work:
<input type="button" id="mybutton" value="click me" />
<script>
var x;
$(document).ready(function(e) {
x=5;
});
function myFunction(){
alert(x);
}
$('#mybutton').click(myFunction);
</script>
jQuery is Javascript, it's just a matter of scope for the Javascript variable.
Make the variable global, then you can access it from the function also:
var x;
$(document).ready(function(e){
x = 5;
});
function myFunction() {
alert(x);
}
However, the ready event runs when the entore document has loaded, so the value is only available after the event handler has run. If you call the function before that, the value of the variable is still undefined.
Something like this should work, x just needs to be a global variable:
<script>
var x;
$(document).ready(function(e){
x=5;
});
function myFunction(){
alert(x);
}
myFunction();
</script>
This is just javascript scoping rules. The x defined inside a function is not available outside. You either need to pass that value to myFunction, or you need to define x in a scope that myFunction can see.
multiple ways:
var x; // may be initiated with a value
$(document).ready(function(e){
x = 5;
});
or
$(document).ready(function(e){
window.x = 5;
});
However the ready event has to fire before the value is in the variable. If you ask for it directly in your code you will get undefined.
I recommend to do everything inside your ready event. Then you also have access to your variable.
var x;
$(document).ready(function(e){
x=5;
myFunction(); // call it here or later
});
function myFunction(){
alert(x);
}

HTML Input (Javascript) [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
please help me
I have a script which works on First Page Load, And when i use the function of this script again is doesn't work until i refresh the page, Means i want this script to work always, Not only when i will refresh the page, here is the script:
$(function(){
var fullEmail = $('#email').val();
console.log(fullEmail.length);
if(fullEmail.length>15)
{
textDot = fullEmail.substr(0, 14)+'...';
$('#email').val(textDot);
}
var oldText = $('#email').val();
$('#email').bind({
mouseover : function () {
$('#email').val(fullEmail);
},
mouseout: function () {
$('#email').val(oldText);
}
});
});
thanks in advance..
I have created a JSFiddle to demonstrate this. When you type in the email and then leave the input box, it shortens. When you re-enter the input box it expands back to its full length...
$('#email').bind('change', function () {
$self = $(this);
var fullEmail = $self.val();
var shortEmail = fullEmail;
if(fullEmail.length > 15) {
shortEmail = fullEmail.substr(0, 14)+'...';
$self.val(shortEmail );
}
$self.bind({
focus: function () {
$self.val(fullEmail);
},
blur: function () {
$self.val(shortEmail);
}
});
});
var oldText;
var fullEmail;
function smt(){
fullEmail = $('#email').val();
console.log(fullEmail.length);
if(fullEmail.length>15)
{
textDot = fullEmail.substr(0, 14)+'...';
$('#email').val(textDot);
}
oldText = $('#email').val();
}
$(function(){
$('#email').bind({
mouseover : function () {
smt();
$('#email').val(fullEmail);
},
mouseout: function () {
smt();
$('#email').val(oldText);
}
});
});

Categories