Joomla Templates Club 406,261 posts

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#173675

Hi,

I’m having an issue with this template and sliding divs. Here are the steps to reproduce the issue :

1. add in the head the java script showHide.js available at http://papermashup.com/jquery-show-hide-plugin

2. create a new article in joomla with the following html code:

<!– begin bib –>

<div class=”bibheader”>Refereed Articles and Book Chapters</div>
<div class=”bibresult”>

<div class=”bibrefid”>2012</div>
<!–<div class=”bibline”>–><div class=”bibref”><a name=”2012″></a></div> <a name=”#” style=””></a><div class=”bibitem-citation”><div class=”bibitem-thumbnail”><a target=”_blank” href=”#”><img src=”http://upload.wikimedia.org/wikipedia/en/7/70/Example.png” alt=”” title=”” /></a></div>
<div class=”bibitem-citation-text”>a, b, c, <a target=”_blank” href=”#”>”Title”</a>, <i>In journal</i>, pp. 0-13, 2012.
<span class=”Z3988″ title=””></span><p> <a target=”_blank” class=”biburl” title=”” href=”#”><img src=”/pubs/icons/tex-icon24.png” alt=”[bib]” title=”[bib]” /></a> <a target=”_blank” href=”#”><img src=”/pubs/icons/pdf-icon24.png” alt=”[pdf]” title=”[pdf]” /></a> <a target=”_blank” href=”#”><img src=”/pubs/icons/doi-icon24.png” alt=”” title=””/></a> <span class=”jsonly”><a href=”#” class=”show_hide” rel=”#slidingDiv_4f31f031394ca”><img src=”/pubs/icons/video-icon24.png” alt=”” title=”“/></a></span> <noscript><a href=”http://content.longtailvideo.com/videos/flvplayer.flv” class=”show_hide” rel=”#slidingDiv_4f31f031394ca”><img src=”/pubs/icons/video-icon24.png” alt=”” title=”“/></a></noscript></p><div class=”bibitem-video”><span style=”jsonly”><div class=”slidingDiv” id=”slidingDiv_4f31f031394ca” style=”display:none;”><div class=””>

<div id=’jwplayer9218402′>Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… </div>

</div></div></span></div>
</div>
</div>
<!–</div>–>
</div>

<!– end bib –>

3. Go to the article URL

Demo site with that issue : http://ref.rufiange.com/test3424

4. Click on the Video Icon (at the right), which uses jquery:slideToggle().

5. The template expands to show the text.

6. Click again on the video Icon. The content div / black border resizes but the parent divs are not resized properly.

Expected result: the parent divs are also resized to adapt to the new size
Actual/wrong result : the parent divs do not resizes, so if I have many videos, the page ends up with a lot of blank spaces.

Anyone else having troubles with sliding divs + a joomlart template ? Any thoughts on how to investigate or fix that issue ?

Thank you – any help would be much appreciated

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#437632

Have you tried your code with a standard template like BEEZ to ensure the code is good?

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#437636

<em>@Blaine 299662 wrote:</em><blockquote>Have you tried your code with a standard template like BEEZ to ensure the code is good?</blockquote>

Thank you Blaine.

I just did test it with BEEZ5. The result : the code works as expected with BEEZ5 template. I only changed the default template for english to BEEZ5 instead of ja_travel. This confirms that the issue is with ja_travel only I think.

Let me know your thoughts. I will gladly help debug or test possible fixes and report back.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#437639

Let’s start simple first.
What version of Ja Travel and what version of Joomla please.

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#437641

<em>@Blaine 299669 wrote:</em><blockquote>Let’s start simple first.
What version of Ja Travel and what version of Joomla please.</blockquote>

I am using joomla 1.7.3 Stable and JA_Travel version 1.1.0 (august 2011). According to ja_ext_manager, no new updates are found (all updated) – e.g. I have JA T3 Framework version 1.6.1 (8 fev 2012).

Your assistance is very appreciated.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#437778

Is this a JWVideo Player custom HTML you are using?

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#437785

<em>@Blaine 299851 wrote:</em><blockquote>Is this a JWVideo Player custom HTML you are using?</blockquote>

I am using JWPlayer in the real site (custom HTML generated by PHP), but in the demo site at the URL I provided, I removed the embedded JWplayer to simply output simple text to simplify the debugging (the issue still appears only with text). The issue seems to be related to the imbrications of parent DIVs in the ja travel template, while in BEEZ this imbrication might be more limited, which probably helps the javascript code work.

Maybe by comparing both divs structures with the javascript code used for slidding, it might provide a clue how to fix it ? I imagine it might require a change in the CSS of the ja travel template as well.

The javascript sliding code for reference: it simply execute “div associated with video icon”( which is encoded in the “rel attribute”).slideTogggle();


(function ($) {
$.fn.showHide = function (options) {

//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'

};
var options = $.extend(defaults, options);

$(this).click(function () {

// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');

// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}

});

return false;

});

};
})(jQuery);

( function($) {
// we can now rely on $ within the safety of our "bodyguard" function

$(document).ready(function(){

$('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont wan$
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});

});

} ) ( jQuery );

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#437786

Have you tried a jQuery no conflict method?

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#437789

<em>@Blaine 299860 wrote:</em><blockquote>Have you tried a jQuery no conflict method?</blockquote>

Yes, I tried it but the problem is still there.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#437791

Is the code yours or provided by someone else?

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#437792

<em>@Blaine 299865 wrote:</em><blockquote>Is the code yours or provided by someone else?</blockquote>

As I said in the first post, it is the showHide.js script available at http://papermashup.com/jquery-show-hide-plugin (I included it in my last post for easy reference).

Thank you again

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#438470

I meant the no jQuery no conflict code

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#438471

<em>@Blaine 300787 wrote:</em><blockquote>I meant the no jQuery no conflict code</blockquote>

Oh ok. To answer you properly, I tested noconflict using my own code. I verified by manually calling the noconflict just before the sliding of the divs. It did not change anything however. Also, I think it might not be the issue, since the exact same javascript code work fine (the divs do slide and the parents containers div resizes properly) in other templates from JA.

Maybe we could “simplify” the template to test if that helps (e.g. no footer div) ? Let me know – Thanks a lot.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#438491

JA extensions and templates all have different jQuery to my knowledge so it working with one and not another is not a realistic approach to deciding it is not jQuery.
I am actively investigating this issue for you and want you to look at this through the dev of the html code you are using Q&A system. they seem to be fairly responsive to user issues. have you asked for them to see if there are any known issues?
If not, please do that.
I ma not familiar with this custom HTML and will have to try to figure it out. Please be patient with me.

[srufiange Friend srufiangeJoin date: December 2008Posts: 24Downloads:0Uploads:0 Thanks: 2]

#438496

<em>@Blaine 300811 wrote:</em><blockquote>JA extensions and templates all have different jQuery to my knowledge so it working with one and not another is not a realistic approach to deciding it is not jQuery.
I am actively investigating this issue for you and want you to look at this through the dev of the html code you are using Q&A system. they seem to be fairly responsive to user issues. have you asked for them to see if there are any known issues?
If not, please do that.
I ma not familiar with this custom HTML and will have to try to figure it out. Please be patient with me.</blockquote>

OK I will report back their ideas, if they have any – Thanks again for working on this. Let me know.

[Author]

Posts