Docs

[Amir]

Hi, This maybe a java 101 question, however, I am relatively new to this and trying to find my way.

I am aiming to make the animation GIF in my site to start playing only on mouse hover. After much research I concluded that I would need to have two versions of the image, one static and one animated. On hover over the static image it would change to the animated one and play.

The code to achieve this is:

<img id="SelectText" src="http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.png" />

$(document).ready(function()
{
    $("#SelectText").hover(
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.gif");
        },
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.png");
        }                         
    );                  
});

This worked as expected when tested in jsfiddle website, see: http://jsfiddle.net/EXNZr/1121/

However, it is not working when I try to implement it on my page. I added the Java in the > Custom JS section, but I am not sure if that is the correct way to approach it.

Page: http://www.2-excel.com/how-to-apply-or-remove-highlights-in-microsoft-word/

Any help or advice is much appreciated.

Thank you.

[Jade]

Hi there,

Please try this:

(function($){
    $("#SelectText").hover(
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.gif");
        },
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.png");
        }                         
    );                  
})(jQuery);

Hope this helps.

[Amir]

It Worked!

Thanks a lot.

I have another question about this topic and I realise it might be outside the scope of your support, however, any help or advice would be very much appreciated.

I am aiming to use the method of GIF animation I mentioned above on almost every post and for many images within each post. This would eventually mean hundreds of them.

I am wondering if there can be a universal JS / code that I can use and add in the customization > custom CSS / JS that would simplify the work.

Thanks again

[John Ezra]

Hi there,

Thanks for updating the thread! Regretfully, this is beyond our scope of support. You would need to engage a developer for such a custom solution.

You can check out our recommended partners: https://theme.co/x/member/custom-development/

Thank you for understanding. Have a wonderful day! 🙂

[Amir]

Hi. No problems. You’ve been helpful enough.

I have one final (I hope) technical question.

<img id="SelectText" src="http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.png" />

When I add the code above as Raw content the I get left and right margins that I can’t seem to get rid off.
When I add the image as an element the margins are not there, however, it doesn’t work with the JS code that is there. I gave the element the ID (SelectText).

Could you please advice on either how to get rid of the left and right margins or how to make the image element interact with the JS code with the following ID= SelectText.

You can see what I mean in the attached image or on the following page: http://www.2-excel.com/?p=1060&preview=true

Thanks

[Jade]

Hi there,

The link your have provided above goes to a 404 page. Kindly provide us with an active link so that we could check it.

Thank you.

[Amir]

Hello,

Sorry about that. It´s: http://www.2-excel.com/how-to-apply-or-remove-highlights-in-microsoft-word

Thank you

[Rue Nel]

Hello There,

Thanks for providing the link. Please edit your page back in Cornerstone. You need to disable the column container in the row settings. I think all of the row settings needs to have the column container disabled so that it removes the space on the left and right of the content area. Please also keep in mind that the is a space around the content area which also contributed to the space on the left and right of your image.

Hope this helps.

[Amir]

Hello. Thank you for your reply.

Unfortunately disabling the column container did not solve the issue.

Honestly, it would be better if I could somehow use the Image element instead and assign the ID to the element. But when I tried that as well it did not work. Hope you can assist.

Thank you

[Christopher]

Hi there,

Please find and remove following code :

@media (max-width: 979px){
.postbody {
    padding: 0px 25px !important;
}
}
.postbody {
    margin: 0px 40px !important;
    padding: 0px 40px !important;
}

Hope it helps.

[Amir]

Hi.

That kind off made it worse.

The border is now the width of the body so are the rest of the content in the body.

I would like the border to be the exact width of the image. Just like the image below it.

Thanks for your help.

[Rad]

Hi there,

Please remove that CSS.

The only solution for that is disabling the column container, even if you apply some CSS directly to the image by ID, it still within the columns, and it has the container that limits the width. It’s not a border, but spacing left out by max-width. It’s like making the image bigger than its container.

Turning off the container should do it. Please note that you can selective choose which section/row should have the container or not. You can enable column container for the section that has the text, then disable column container for the section that has the image.

You should remove this CSS too,

@media (max-width: 1500px) { 
 .single-post .site .entry-content.content .x-container.max.width { 
    max-width: 1500px !important; 
    width: 100% !important; 
  } 
} 
.single-post .site .x-container.max.width.offset { 
  max-width: 1250px !important; 
  width: 100% !important; 
} 

That’s the reason why toggling on and off the column containers have no effect at all. You shouldn’t force them to become full-width, there are options that are available for that purpose. If you do, then those options will be useless 🙂

Thanks!

[Amir]

Hello, thank you for your reply.

When I removed all the codes you indicated, that solved the issue of the spacing left out by the max width.

However, that made some drastic changes to the page dimensions that I had pre-setup . Please see the attached image.

My next question would be how to reverse the effect of removing these codes without affecting the outcome we achieved here.

Thanks a lot for your help.

[Rad]

Hi there,

In that case, please just add this

.single-post .site > .x-container.max.width.offset { 
  max-width: 1250px !important; 
  width: 100% !important; 
} 

The > means it will only select the direct child of .site that limits the outside container(not column container).

Thanks!

[Amir]

Thanks for the info. Its good to know about the meaning of the ‘>’ sign. It’s been useful to me in other pages.

However, while this brought back the page dimension that is required, it also brought back the problem I was initially facing. The border of the image now has spacing on both of its sides that I would like to get rid off.

As using the ‘Image’ element instead of the ‘Raw Content’ element does not give this problem, I would like to try another approach:

I have this JS, that switches the image to another image (gif) on mouse hover:

(function($){
    $("#SelectText").hover(
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.gif");
        },
        function()
        {
            $(this).attr("src", "http://www.2-excel.com/wp-content/uploads/2016/06/SelectText.png");
        }                         
    );                  
})(jQuery);

How can I have the ‘Image’ element interact with this code?

I added the ‘Image’ element, inserted the main image and then gave it the id: SelectText, however it did not work.

Plz refer to the second image in the page. It has the same id as the first image, however, it does not interact with the JS like the first image. Note that the first image was added to the page as a raw content.

http://www.2-excel.com/how-to-apply-or-remove-highlights-in-microsoft-word/

Sorry for the much disturbance.

Thanks

[Author]

Posts