jQuery – bbird.me http://bbird.me WordPress quick tips Wed, 08 Aug 2018 16:39:07 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 How to change href value using jQuery http://bbird.me/how-to-change-href-value-using-jquery/ http://bbird.me/how-to-change-href-value-using-jquery/#respond Sat, 07 Jan 2017 15:14:02 +0000 http://bbird.me/?p=601 If you have a situation where you would like to change href atribute (URL, that is), but can’t access the

Post How to change href value using jQuery je prvi puta viđen na bbird.me.

]]>
If you have a situation where you would like to change href atribute (URL, that is), but can’t access the code directly, you can definitely try using jQuery prop():

jQuery(document).ready(function($){
$(".home container a").prop("href", "http://google.com/");
});

So all you need to do is target <a> element within container and this should do the trick.

 

Post How to change href value using jQuery je prvi puta viđen na bbird.me.

]]>
http://bbird.me/how-to-change-href-value-using-jquery/feed/ 0
fullPage.js and Advanced Custom Fields integration http://bbird.me/fullpage-js-advanced-custom-fields-integration/ http://bbird.me/fullpage-js-advanced-custom-fields-integration/#respond Fri, 16 Sep 2016 14:28:45 +0000 http://bbird.me/?p=557 fullPage.js is an immensely powerful free jQuery-based JavaScript library, offering (as the name suggests) an ability to create very attractive, dynamic

Post fullPage.js and Advanced Custom Fields integration je prvi puta viđen na bbird.me.

]]>
fullPage.js is an immensely powerful free jQuery-based JavaScript library, offering (as the name suggests) an ability to create very attractive, dynamic and responsive full-screen scrolling websites. The library was created by Spanish developer Álvaro Trigo and it is being used by some of the world’s top brands.

Read the full post here!

Post fullPage.js and Advanced Custom Fields integration je prvi puta viđen na bbird.me.

]]>
http://bbird.me/fullpage-js-advanced-custom-fields-integration/feed/ 0
Differences between jQuery easings http://bbird.me/differences-jquery-easings/ http://bbird.me/differences-jquery-easings/#respond Mon, 07 Mar 2016 19:59:12 +0000 http://bbird.me/?p=395 Easings within jQuery appear as linear and swing only, but if you include jQuery UI into equation, you can get

Post Differences between jQuery easings je prvi puta viđen na bbird.me.

]]>
Easings within jQuery appear as linear and swing only, but if you include jQuery UI into equation, you can get quite a lot of very nice effects. This is where you can find them.

Let me show you an example on how to easily implement easings using animate() function:

$( "#easeOutBounce" ).click(function() {
  $( ".easeOutBounce" ).animate({
    height: "toggle"    
  }, 3000, 'easeOutBounce', function() {
    // Animation complete.
  });
});

Some CSS:

.easeOutBounce {
  width: 200px;
  height: 200px;
  background: #000;
}

… and some HTML:

<div id="easeOutBounce">
    <p>easeOutBounce</p>
  </div>
  <div class="easeOutBounce">
  </div>
</div>

If you want to see how this looks like an action, have a look at my Codepen example. I’ve also posted some comments on how you can change the easing effects easily.

Post Differences between jQuery easings je prvi puta viđen na bbird.me.

]]>
http://bbird.me/differences-jquery-easings/feed/ 0
Reloading the website on resolution change http://bbird.me/reloading-the-website-on-resolution-change/ http://bbird.me/reloading-the-website-on-resolution-change/#respond Sat, 25 Apr 2015 09:25:31 +0000 http://bbird.me/?p=99 The code I posted on this link works fine, but has one limitation – if the site visitor changes the resolution

Post Reloading the website on resolution change je prvi puta viđen na bbird.me.

]]>
The code I posted on this link works fine, but has one limitation – if the site visitor changes the resolution (rotates the mobile phone or tablet device), the stacking will remain as it was in the first place. And this translates into layout errors. Hence the client requested for a way to avoid this – one of the ideas is to reload the website on resolution (orientation) change. Here’s the snippet that worked for me:

jQuery(document).ready(function($){
var windowWidth = $(window).width();

$(window).resize(function() {
    if(windowWidth != $(window).width()){
    location.reload();
    return;
    }
});
});

 

Post Reloading the website on resolution change je prvi puta viđen na bbird.me.

]]>
http://bbird.me/reloading-the-website-on-resolution-change/feed/ 0
Changing order of HTML elements using jQuery http://bbird.me/changing-order-of-html-elements-using-jquery/ http://bbird.me/changing-order-of-html-elements-using-jquery/#respond Sat, 18 Apr 2015 21:47:59 +0000 http://bbird.me/?p=87 If you want to change the order of HTML elements displayed on the page, there are at least two options

Post Changing order of HTML elements using jQuery je prvi puta viđen na bbird.me.

]]>
If you want to change the order of HTML elements displayed on the page, there are at least two options – the first one is to try CSS display property, namely any of the table-column-grouptable-header-group and other values that make HTML elements to behave as table elements. This can perform only basic tasks, though, and normally is useful inside the same HTML container only.

For any advanced change of order, jQuery is a way to go. Specifically, the insertAfter() method. Let me give you a working example:

jQuery(document).ready(function($){

if ($(window).width() < 781) {
   $("#pgc-7-0-0").insertAfter("#pgc-7-0-1");
   $("#pgc-7-1-0").insertAfter("#pgc-7-0-0");
   $("#pgc-7-0-2").insertAfter("#pgc-7-1-0");
}
else {
   //do nothing
}
});

This comes from one of the WordPress websites I’ve worked on – the request was to stack elements differently when on mobile layout (the theme was coded to go into mobile below 781px, hence the condition). Elements were not within the same container, but “scattered”all across the page.

Let’s examine the first line:

$("#pgc-7-0-0").insertAfter("#pgc-7-0-1");

The insertAfter() method is quite self-explanatory, so in this case the HTML element with #pgc-7-0-0 ID will appear after #pgc-7-0-1, regardless on the previous position within the page.

References:

Post Changing order of HTML elements using jQuery je prvi puta viđen na bbird.me.

]]>
http://bbird.me/changing-order-of-html-elements-using-jquery/feed/ 0
How to add jQuery (or JS…) script on specific WordPress page http://bbird.me/how-to-add-jquery-or-js-script-on-specific-wordpress-page/ http://bbird.me/how-to-add-jquery-or-js-script-on-specific-wordpress-page/#respond Fri, 17 Apr 2015 21:51:38 +0000 http://bbird.me/?p=79 Let’s say that you want  to execute some jQuery script on a specific WordPress page – I had this case where

Post How to add jQuery (or JS…) script on specific WordPress page je prvi puta viđen na bbird.me.

]]>
Let’s say that you want  to execute some jQuery script on a specific WordPress page – I had this case where I had to change the order of several HTML elements on a specific page, but as the website was using some sort of visual editor which adds the same classes for blocks of the same type throughout the website, the script would change the order of the elements on the whole website as well.

WordPress does have is_page conditional tag which comes handy in many situations, but if you want to include jQuery script on a particular page while using the proper wp_enqueue_script method at the same time, then you would only need to add is_page condition while enqueuing scripts in functions.php. So let’s have a look at the quick snippet which is only one of the ways on how to achieve this:

function bbird_under_test_scripts() {
    if ( is_page(15) ) {	        
        wp_enqueue_script( 'testscripts', get_stylesheet_directory_uri() . '/js/testscripts.js', array('jquery'));
}	
}
add_action( 'wp_enqueue_scripts', 'bbird_under_test_scripts' );

In this case, testscripts.js will work on the page whose ID is 15.

References:

Post How to add jQuery (or JS…) script on specific WordPress page je prvi puta viđen na bbird.me.

]]>
http://bbird.me/how-to-add-jquery-or-js-script-on-specific-wordpress-page/feed/ 0
Glowing HTML button with jQuery http://bbird.me/glowing-html-button-with-jquery/ http://bbird.me/glowing-html-button-with-jquery/#respond Mon, 06 Apr 2015 12:04:09 +0000 http://bbird.me/?p=45 There are certainly better ways to create a glowing button, but here is one simple way I used on one

Post Glowing HTML button with jQuery je prvi puta viđen na bbird.me.

]]>
There are certainly better ways to create a glowing button, but here is one simple way I used on one of my clients’ websites. The request was to create a rounded button with glowing effect. In other words, I wasn’t able to use CSS3 infinite animations because none of them were suitable for that.

Naturally, I turned to jQuery which offers endless possibilities when it comes to HTML and CSS manipulations. Since the main request was that glowing effect should be permanent, I was required to set a loop of effects which would enable me to achieve this. Naturally, fade in and fade out were the first things that came to my mind. Let’s have a look at the function I implemented into WordPress (hence jQuery(document).ready(function ($) syntax):

jQuery(document).ready(function ($) {
    var $element = $('.fading');

    function fadeInOut() {
        $element.fadeIn(1000, function () {
            $element.fadeOut(500, function () {
                $element.fadeIn(1000, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Furthermore, I had this idea to have one button on the front (it would also be a link), while I would also have an exact button behind it (naturally, I used z-index for this). The back button would actually have this glowing effect, while the front button would remain static, without any effect. So let’s have a look at HTML I used:

<div id="boxes">
    <a href="#" style="display:block;">
        <div class="box-button-main">
        </div>
    </a>

    <div class="fading"></div>
</div>

(As you can see, I didn’t bother with CSS classes very much – you’re free to do so. And since you asked – display: block was added to <a> as that turns <div> HTML element into link.)

And here comes the last part – CSS:

.fading {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:1;
    position: absolute;
    left:0px;
    -webkit-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    -moz-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
}
#boxes {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 100px;
    top:50px;
}
.box-button-main {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:99;
    position: absolute;
    left:0px;
}

You can see my idea within this code – as mentioned earlier, I have an exact button below the main one, but I added box-shadow style to it that would, when using fading effect, make our button glowing. And that’s all there is – you can easily use this function to implement your own ideas, especially if you need infinite fading effects.

I’ve also created a jsfiddle where you can see how this works (I hope no one deleted or modified the code on purpose) – check the link within the resources below.

Resources:

 

 

Post Glowing HTML button with jQuery je prvi puta viđen na bbird.me.

]]>
http://bbird.me/glowing-html-button-with-jquery/feed/ 0