Home Forums Tutorials and Hints from Users Using Scripts for advanced styling or design changes. Re: Using Scripts for advanced styling or design changes.

#30881
scrambler
Moderator
1) Removing the links to a specific author while retaining the author’s name.
This is an example of a script (from @weaver) altering the HTML output of the theme PHP and allowing to avoid creating a Child theme.
Add the following to the Advanced Options -> HTML Insertion -> Post-Footer box:
<script type=”text/javascript”>
jQuery(‘.archive a[title=”weaver”]’).contents().unwrap();  // remove link around author “weaver” on the “Author Archives : weaver line
jQuery(‘.archive a[title=”View all posts by weaver”]’).contents().unwrap(); // remove link around “weaver” on the Posted by meta line on the archive page
</script>

Note: this is designed just for an archive page (including the Author Archive page). You will have to have that pair of jQuery statements for each author you want to remove the link from. You replace the name “weaver” with the name displayed for the author in question.

If you wanted to remove the author link on all pages, remove the .archive in the code. The title=”View all posts by” value is likely to be different for different edit translations. You can get the exact wording by looking at the HTML output of the page, either with a developer tool or reading the HTML page source directly.

2) Change styling elements on scrolling.
Below are two generic ways of using a script for dynamic styling.
By either, (A) using the script to add a styling class to some elements, and then use CSS to create styling rules based on that class, or (B) have the script write inline CSS on elements.
A- Use a script to apply a set of styling rules under specific condition (here scrolling), by adding a class to an element.
This is best if there is a lot of styling involved. All the script has to do is add or remove the class under certain conditions.
You can then change the styling applied at will without having to touch the script. The less scripting you need the less room for errors.
 
In the example below, when scrolling down the page, as the primary menu bar reaches the top, we want it to become fixed, with a semitransparent background.

The CSS below defines the styling connected to two made up class named  wvrx_top-fixed 
The class is used to define a styling rule that will fix and style the menu bar.

#nav-primary .wvrx-menu-container.wvrx_top-fixed {background-color: rgba(255,255,255,.9) !important;position:fixed;top:0;width:100%;max-width:1100px;z-index:999;}

The script below gathers the top position of the menu, then uses that value as the amount to scroll before adding the styling class to the menu element so that it becomes fixed and styled as we want.
Because the script needs to know the position of the menu bar before you start scrolling, it needs to be executed after the page is generated.
So that Script needs to go in Advanced options > HTML Insertion > Post Footer Code box

Note: The script has been modified to also adjust the body top margin, using the direct CSS write method described in B ) below it

<script type=”text/javascript”>
//Need to define styling rule for fixed element (below)
//#nav-primary .wvrx-menu-container.wvrx_top-fixed {background-color: rgba(255,255,255,.9) !important;position:fixed;top:0;width:100%;max-width:1100px;z-index:999;}

var my_selector = “#nav-primary .wvrx-menu-container”;       //Defines the selector target as the primary menu bar element
var ElementHeight =  jQuery(my_selector).outerHeight();     //Gathers the height of the selected element
var ElementPosition =  jQuery(my_selector).offset().top;     //Gathers the top position of the selected element
jQuery(window).scroll(function() {
var windowScroll = jQuery(window).scrollTop();  //Collects the amount of scroll
    if (windowScroll > ElementPosition ) {      //Use the selected element top position as the trigger position
        jQuery(my_selector).addClass(“wvrx_top-fixed”);    //Add the class to the targeted element to apply the class styling
        jQuery(‘body’).css(‘margin-top’, ElementHeight);   //Add top margin to body to prevent content shift
    } else {
        jQuery(my_selector).removeClass(“wvrx_top-fixed”);
        jQuery(‘body’).css(‘margin-top’,””);
    }
});
</script>
B- Use a script that makes direct changes to the inline CSS of any object with a specific CSS selector.
This method is suitable if you just have a few CSS properties to change. The script will directly write the CSS on the element HTML in a style attribute.
You need know the selector of the object to target, or have the ability to add a class to the object (like if you are creating the HTML, or targeting the theme object with the “Plus” Add Class option).

The example below will scale down the size of any object that uses the class  my_ScaleHeight while scrolling (down to a predefined size).

Idea comes from the following thread of someone wanting to reduce the size of a Header logo image when people scroll, to maximize space for content.
http://stackoverflow.com/questions/20706647/jquery-image-height-change-on-scroll

For example, if we want the script to affect the size of an image placed in the fixedtop area, you would put the below HTML image tag in that box, giving it a specific class my_ScaleHeight  (you can use any name you want).
We will then use that class in the script to change the height of the image when scrolling.

<img style=”height:250px;width:auto;” src=”imageUrl” class=”my_ScaleHeight” />

Note: Instead of using a made up class, we could also use a unique selector that targets that image if we know it.
For example if there is only one image in the fixedtop area, we could use ‘#inject_fixedtop img’ instead of ‘.my_ScaleHeight’

That script does not need to know anything about the page elements, so it can go in Advanced options > HTML Insertion > Head section.

<script type=”text/javascript”>
var imageHeight = parseInt(jQuery(‘.my_ScaleHeight’).css(‘height’));    //Gathers the image height
var stopHeight = imageHeight * 0.5;                   //Sets the minimum size for scaling. Replace 0.5 scaling factor by what you want
jQuery(window).scroll(function() {
var windowScroll = jQuery(window).scrollTop();  //Collects the amount of scroll
var  newHeight = imageHeight – windowScroll;     //Calculate the new height by reducing the height of the image by the scroll value
    if(newHeight >= stopHeight){                                 //Apply it only is above the set limit
        jQuery(‘.my_ScaleHeight’).css(“height”, newHeight);    //Write the inline height CSS on the element
    }
    else{
        jQuery(‘.my_ScaleHeight’).css(“height”, stopHeight);   //Beyond the limit, set the height as the limit
    }
});
</script>

Enjoy a new world of possibilities