Can't get jquery script to work.

[rixator]

Hi guys,

I am terrible at javascript and jquery but I desperately need a special feature for my site so with a little help from google and after days of copy/pasting bits from the web I managed to get a functioning example of the feature I need.

The script’s purpose is to only show a specific part(height) of the description tab on the product page. If a visitor would like to read more about the product, he or she would only have to click on a button to expand the tab and read all available text in that tab. If the available text in the tab is less than the initial visible height of the tab (aka, not overflowing), then there will not be a button to click for expanding the tab.

This is very helpful if you are using tabs on product pages, you have a lot of text for description of the product and don’t want the product page to be 100 miles long because of all the text you have in the tab.
For a working example of my script, please visit: http://jsfiddle.net/gNsrG/305/

Now to my problem: I can’t get it to work when I paste the script in “Custom JS” in admin. The tab (div) is set to the visible height it should be according to the CSS but there is no button under the tab to click on according to the jquery script.

Do you have any idea what might be causing this problem?
Kindest regards.

[Mohammad – SUPPORT]

Hi,
If you provide specific page url so i can debug to fix the issue very soon .
Thanks 🙂
With Best Regards
Swift Ideas

[rixator]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
I tried and could not resolve. Unfortunately that is not part of the current theme functionality, and it’s not within the scope of our support to be able to provide that functionality as it is more work than a small customisation. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need that functionality, potentially from one of the below resources:

https://codeable.io

Home

http://www.microlancer.com

Thanks 🙂
With Best Regards
Swift Ideas

[Swift Ideas – Ed]

Hi @rixator

Is the code there now? had a quick look at front-end source and doesn’t seem like it’s begin outputted.

– Ed

[rixator]

Hi Ed,

That’s right. I put the code in the custom js part of admin but it is not being outputted in front-end.

Kind regards

[Mohammad – SUPPORT]

Hi,
I have spent time and corrected code to work with theme so please check it now.
The corrected CSS code :

.read-more {
    background: none repeat scroll 0 0 #E3E3E3;
    position: relative;
    text-align: center;
    top: -52px;
    width: 100%;
  cursor:pointer
}

The corrected JS code:

<script>
jQuery( document ).ready(function($) {
$(".tabs li a").click(function() {var ahref=$(this).attr('href');console.log(ahref);if(ahref!='#tab-description'){$('div.read-more').hide();console.log('hide');}else{$('div.read-more').show();console.log('show');}});
$( "div.read-more" ).live( "click", function() {
var thisText = $(this).text() ;
if (thisText == 'Read more') {
var curHeight = $('#tab-description').height();
$('#tab-description').css('height', 'auto');
var autoHeight = $('#tab-description').height();
$('#tab-description').css('height', curHeight + 'px');
$('#tab-description').animate({
'height': autoHeight + "px"
}, 600);
$(this).text((thisText  == 'Read more') ? 'Minimize' : 'Read more');
}
else if (thisText  == 'Minimize') {
$('#tab-description').animate({
'height': '150px'
}, 300);
$(this).text((thisText  == 'Read more') ? 'Minimize' : 'Read more');
}
 return false;
});

if ($('#tab-description')[0].scrollHeight >  $('#tab-description').innerHeight()) {
$('#tab-description').after('<div class="read-more" >Read more</div>');
}
});
</script>

Thanks 🙂
With Best Regards
Swift Ideas

[rixator]

Fantastic!
Thank you very much for your help 😀

[Mohammad – SUPPORT]

Hi,
You most welcome . I’m glad that issue resolved .
Thanks 🙂
With Best Regards
Swift Ideas

[rixator]

Hello again,
Thank you very much for your help last time.

I encountered a few errors that I located to be a conflict with this script.
• The search function is not accessible on any page other than product page.
• On “My account” page the modal windows for email customer care and shipping information etc. darkens the entire page and nothing is clickable.

I think that if the javascript only loads on the product pages then this issue will not appear.
Do you know if I can load the script only on product pages or do you think that the problem might be something else?

Thank you.
Kindest regards

[Mohammad – SUPPORT]

Hi,
This script will not conflict with any script. YOu need to upgrade theme and plugins first. Hopefully that should fix your issues .
Thanks 🙂
With Best Regards
Swift Ideas

[rixator]

Hi,
I have updated the theme and all plugins to the latest versions but the problem still exists.

I thought that maybe I could keep the search box open as discussed in this thread but then I realized that the menu button that appears on smaller screens like on smartphones still would not work.

Do you have any other ideas on possible solutions?

Thank you.

[Mohammad – SUPPORT]

Hi,
Have you made any changes beside it ?

Thanks 🙂
With Best Regards
Swift Ideas

[rixator]

Hi,

No I have not made any changes to the script.

Kind regards,

[Mohammad – SUPPORT]

Hi,
I have resolved it so please check it now.
Thanks 🙂
With Best Regards
Swift Ideas