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.

Read the full post here!

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

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.

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.

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:

• .insertAfter() method
• CSS display property

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

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:

• Function Reference/wp enqueue script
• Function Reference/is page

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

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:

• jsfiddle working example

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