Jquery Trigger Change Event | Jquery Onload Function

Jquery Trigger Change Event | Jquery Onload Function

by | May 27, 2019 | Jquery

Jquery trigger change event can be called with a few simple line of code. Let’s take an example, jquery on page load or jquery after page load, you just want to call an function which is onchange function of jquery.

Solution 1: With Jquery Onload Function

1
2
3
$("#yourElement").change(function(){
   // your code here
}).change()

You can call the .change() event function on any regular jquery function having the above syntax. Put .change() function at the end of event and it will boom.

Solution 2: Jquery Trigger Change Event

Jquery on load and after load infograph | mrasta

1
2
3
4
5
6
7
8
9
10
11
12
$(function () {
    yourFunctionName(); //this calls it on load
    $("select#marca").change(yourFunction);
});
 
function yourFunctionName() {
    var marca = $("select#marca option:selected").attr('value');
    $("select#modello").html(attendere);
    $.post("select.php", {id_marca:marca}, function(data){
        $("select#modello").html(data);
    });
}

Here, as script gets run, the first block will execute the yourFunctionName() where you have initiated your calculation or jquery whatever your requirements are will be executed.

[[ Also, read Change Image Source Jquery blog post ]]

Solution 3: Jquery After Page Load

1
2
3
$(document).ready(function(){
    onchange(); // onload it will call the function
});

In this code, the first line is initiating and trigger the ready function of jquery when the page is ready, it will execute the body of this function.
Indirectly, this will execute the onchange()  function which should be initiated somewhere.

Jquery Screen Width and Jquery on Window Resize

Jquery Screen Width and Jquery on Window Resize

by | Apr 2, 2019 | blogC, Jquery

Jquery screen width condition will be executed while loading the document. Jquery on window resize play a nice role for developers to help with jquery media queries.

Solution to Jquery Screen Width

1
2
3
4
5
6
if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

The above code will help you to allocate the width of the screen as the page start loading.

The first line is the condition to check whether the window’s width is smaller than 960, if that is true it will alert the “less than 960” text.

You May Want Jquery on window resize to play around

Here is another solution to jquery screen width but this time screen width resize.

1
2
3
4
5
6
7
8
$(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
else {
    alert('More than 960');
}
});

$(window).resize() function is playing role here and it will watch for the resizing of windows and will act according.

[[ Also check How to Change Image Source Jquery ]]

Do you still need something very simple?

1
$(window).width()

Also, give try to this one as well

1
$(document).width()

You can also target a specific Id, Class or Div to put condition on your query. replace the ‘body’ with your tag or attribute

1
$('body').width()

If Window Width Jquery – Last Example

1
2
3
if ($(window).width() < 960) {
     alert('Less than 960');
}

You can play with If and else as you want but you can use if window width jquery to help you out in this case.

Wrapping Up the Jquery on Window Resize

Jquery basically help you in doing more with writing less code. The above functions will help you to get the value of screen width. If there is still something confusing please put your query in the comment section.

Change Image Source using JQuery

Change Image Source using JQuery

by | Nov 15, 2018 | Jquery

Landing here means that you probably want to change image source using jquery.
Tell me more about your problem, you want a user to click on a button and the image should get change upon the event happening or you want an image to get change on scrolling down to a certain amount of web page.

You can read a separate guide about the scrolling event handling in this guide.

Coming back to the problem and solution of it. We have found 2 major solutions to change the image source using jquery.

Possible Solution 1 – Change Image Source using JQuery

You can easily use the jquery default function attr(). 

Consider that your img tag has an id named as “imageID1” 

1
<img id="imageID1" src="first_image.jpg"/>

Now using jquery you can easily change the image source.

1
$("#imageID1").attr("src","second_image.jpg");

The $ (dollar sign) is the jquery object which initiate all of jquery functions.

 #imageID1 is the id of our img element which we want to change. attr() is jquery function which accept two main paramenters. first parameter should be the type of attribute and the second parameter should be the value of that attribute.

Using src as first parameter and second_image.jpg as second parameter.

Change the image onclick function – jQuery

1
2
3
4
5
$('#imageID1').on({
    'click': function(){
        $('#imageID1').attr('src','second_image.jpg');
    }
});

You can also use the below code for onclick function 

1
2
3
$.('#imageID1').addEventListener('click', function () {
     $('#imageID1').attr('src','second_image.jpg');
});

but don’t limited to them, here is one more option.

1
2
3
$.('#imageID1').click( function () {
     $('#imageID1').attr('src','second_image.jpg');
});

Final Words

This is it to change image source using jquery. You can give try to these codes if you still face any problem just don’t hesitate to start a conversation in comment section. I will try my best to answer your questions one by one.

Jquery If Windows Scroll to Amount of Pixels

Jquery If Windows Scroll to Amount of Pixels

by | Nov 13, 2018 | Jquery

Jquery if windows scroll. So, you are dealing with a webpage which needs on-scroll function, when a user scrolls the page to some extent, so the content, color or something else should change on the page.

Here is a simple possible solution

1
2
3
4
5
6
7
8
9
10
11
$(document).scroll(function() {
  if ($(document).scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff
    $("#idName").attr("src","img/imageName.png");
    $("#idName").addClass("className");
    $(".className").fadeOut();
  } else {
    $("#idName").removeClass("className");
  }
});

Line #1 is targeting the user scroll event when a scroll event is triggered then a jquery function will be called and will check for the scrollTop() function value.

Line #2, If that is more than 50 then the code within the if block will be executed.

You can change the values and Jquery function according to your needs.

You might want to read [Comparison between com and net domain extension]

Final Words on Jquery if Windows Scroll

That is the simple solution to Jquery if windows scroll to certain amount. If you don’t understand anything just let me know in the comment section.

Terms and Conditions - Privacy Policy