Convert simple code from JS to jQuery - javascript

I'm new at both JS and jQuery (behind the times I know) but I have a working JS function that is very simple that I'd like to convert to jQuery. I think if I can get help with this it will help me in understanding the mechanics of jQuery (as I understand this JS).
What this does is to show or hide a div based on whether a pair of radio buttons are selected Yes or no. What I'd like to do (on load) is slide the div in if Yes is selected and out if No is selected. I'd like no to be default (right now Yes is default). I do have jQueryUI running for the slide.
Here is the JS code:
<script type="text/javascript">
function makeChoice()
{
if (document.form1.mobileyesno[1].checked == true)
{
document.getElementById('wanttexts').style.visibility = 'hidden';
}
else
{
document.getElementById('wanttexts').style.visibility = 'visible';
}
}
</script>
I know this is probably elementary but I need the help. :-) Thanks!

function makeChoice() {
$('#wanttexts').css(
'visibility',
document.form1.mobileyesno[1].checked ? 'hidden' : 'visible'
);
}
EDIT better yet:
function makeChoice() {
$('#wanttexts')
[document.form1.mobileyesno[1].checked ? 'slideDown' : 'slideUp']();
}

If you are using jQuery then you can try this
function makeChoice()
{
if (document.form1.mobileyesno[1].checked == true)
{
$('#wanttexts').slideDown();
}
else
{
$('#wanttexts').slideUp();
}
}

Well I could just give you some code converting it for you, but that wouldn't really help. ;) Here's some links I would start with to replace things in that function specifically. The jQuery docs are actually really great (most of the time).
Selectors, specifically, ID Selector. So this is how you actually reference a specific set of things.
CSS This is the function you use to change CSS on an element. Here's the broader section for how to change things in the DOM.
For checked, you should use .prop(). There's actually been some recent upheaval about the difference between that and .attr, but don't worry about it too much.
To do something on load, you should look at .ready(). You can pass functions in that for the whole document like this:
$(document).ready(function () {
//stuff to do on load
});
To show or hide things in jQuery, it actually has some convenience functions like .show() and .hide(), but you can look at effects for more things like sliding and fading. Pretty neat stuff.
There's some other things to know about jQuery, like that you can chain things, etc. It would be worth it to go through some of the introductory documentation like this.

$(function() {
if ($('input[name="mobileyesno"]:checked').val() == 'Yes') {
$('#wanttexts').show();
} else {
$('#wanttexts').hide();
}
);
The outer $(function() { }); means that the code in the curly brackets will run when the page has finished loading. $('input[name="mobileyesno"]:checked') is a way of selecting all input fields which have the name "mobileyesno" and are currently checked, and val() extracts the value of that input field. If you want a particular input field to be selected by default when the page loads, add the checked="checked" attribute to the input tag for that radio button.

function makeChoice()
{
if(document.form1.mobileyesno[1].checked)
$("#wanttexts").hide();
else
$("#wanttexts").show();
}

I was thinking about something like this:
jQuery(function($){
function toggle() {
$('#wanttexts').toggle(
$('[name=mobileyesno]:eq(0):checked').length == 1
);
}
});
See http://api.jquery.com/toggle/

If you want slid effect you can do:
$('#mobileyesno').checked(function() {
$('#wanttexts').slideToggle();
});
Otherwise:
$('#mobileyesno').checked(function() {
$('#wanttexts').toggle();
});

$(function() {
$("#mobileyesno").bind("click", function() {
$("#wanttexts").css("visibility", ($("#mobileyesno").eq(1).is(":checked") ? "hidden" : "visible"));
});
});
.hide() and .show() will set the element to display:none / block - not what the OP's code does.

Related

jquery/javascript to listen for a 3rd party plugin overlay to be closed

I'm currently using a 3rd party jquery plugin which when called from a page, pops up with an overlay, and some forms that are not part of my site.
I've been trying (with no joy so far) to be able to detect from my own sites jquery, when this overlay is closed. I'd like to simply jump to a certain part of the page.
I've tried writing jquery to listen for the final button of the 3rd party form being closed, by checking for it's class name being removed, with .remove .destroy and checking for it's existing with .length and some other methods. however, it seems that my on page jquery can't see anything about these elements at all, and therefor I can't do something fun when that dialogue ends.
Anyone got any ideas of how this could be achieved? Am I missing something obvious?
Cheers in advance!
I was able to get this working via the below javascript. Maybe there is a better way, but this seems to be working well
<script>
var bookingInterval;
$("#ViewingButton").click(function () {
setTimeout(function () {
bookingInterval = setInterval(function () {
if ($(".agent-ui-modal")[0]) {
// Do nothing if class exists
} else {
// Do something if class does not exist
window.location = ("#calculator");
stop();
}
}, 500);
}, 5000);
});
function stop() {
clearInterval(bookingInterval);
}
</script>

innerHTML.replace works in jsfiddle but not in browser

I have such problem:
I have a software which make an order confirmation in .html . I had to figure out how to delate some strings which I do not want to have on confirmation. Because of fact that I have not enough knowledge, I made something like that :
<script type="text/javascript">
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
</script>
Very unprofessional code to remove everything between some div, but it is enough for my solution. It works perfectly in jsfiddle, but not in any browser. Maybe I should load so jquery libary ? I am not sure it is why I am asking for help.
http://jsfiddle.net/LTfyH/79/
Be aware of the fact you're using the id boxik two times. You can only use a id once.
If you want to remove only one element you can use something like:
var el = document.getElementById('boxik');
el.parentNode.removeChild(el);
If you want to remove multiple elements you can select them based on a class for example:
var elementsToRemove = document.querySelectorAll('.remove-me');
A example of both methods:
http://jsfiddle.net/LTfyH/81/
Notice that i added the class remove-me on two elements.
Try to do it in the document onload if you are using pure javascript:
(function () {
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
})();
Or if you are using jQuery:
$(function() {
document.body.innerHTML=document.body.innerHTML.replace(/<div id="boxik"><div class="nazwa">SZ.*font>/, '');
});

How do I select elements with similar attributes using jQuery?

First up, sorry about the title, I know it's not very specific, but I'm really stumped on what else to say.
So before I try and ramble on at what my problem is, you might as well check out this jsfiddle I made:
http://jsfiddle.net/ax1ncdmu/2
How it works in this fiddle is exactly how I want it to work, but as you can see the jQuery is like this:
$(document).ready(function () {
$("input[name=guest0]").click(function () {
$('#guest0').toggle();
});
$("input[name=guest1]").click(function () {
$('#guest1').toggle();
});
$("input[name=guest2]").click(function () {
$('#guest2').toggle();
});
});
But it seems pretty sloppy to write out the code like that, just repeating the same thing over again. I feel like it should be obvious but I haven't worked with jQuery before, so I'm having a hard time figuring it out.
Is there a way to figure out the 'name' of the checkbox being clicked and then use that string to plug into the code? Or is that going the wrong way about it?
You can use jQueries attribute-starts-with-selector:
$(document).ready(function () {
// all inputs that its name starts with "guest"
$("input[name^=guest]").click(function () {
// read the name and apply to id
$('#'+$(this).attr('name')).toggle();
});
});
See it working:
http://jsfiddle.net/ax1ncdmu/7/

Jquery .show does not change display property

I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.
JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.
I must be missing something obvious here.
script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.
(function() {
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").show();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").hide();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
I am sure someone has experienced something similar, why doesn't it change to display:block?
Try with :
$('').attr('style','display:block;')
Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa.
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").toggle();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").toggle();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
even this can also work
/*---for multiple css property-----*/
$('').css({
'display':'block'
});
/*---for single css property-----*/
$('').css('display','block');
So for your first question, to sum up . If you call
$('').show();
You're telling jQuery to select "nothing" and to show this "nothing".
If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):
$('*').show();
A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output
And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.

jquery fade out and redirect not working in IE

I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE
You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow
I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..

Categories