PDA

View Full Version : cufon refresh in AJAX Tabs



Monclee
03-07-2012, 05:59 AM
How can i add to reaload cufon.js in that script, i need it to get the fonts inside the AJAX tabs, if is to difficult i can use a regular font, but it would be nice if there is an easy way. and i think cufon is one nice script for fonts.

:D thanks! in advance, would be great to know your opinion

how can i use Cufon.refresh? i have no idea but i found that in a research.

jscheuer1
03-07-2012, 10:35 AM
I don't know, is it:


cufon.refresh()

or:


Cufon.refresh()

?

Whichever, you can (in the ajaxtabs.js file) put it in the:


ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
var divId=tabinstance.contentdivid
document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
cufon.refresh();
}
}

function.

Or add an instance.onajaxpageload to the on page setup, ex:


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
cufon.refresh();
}

</script>

as described on:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.htm

Monclee
03-11-2012, 02:34 AM
thanks very much, y try the two solutions, with cufon and Cufon, and its not working, =(, when i change from one tab to other the cufon is bypass , i think because the html is loaded after cufon so is not converted.

thanks anyway, any other way i can try?

Monclee
03-11-2012, 02:47 AM
Its working!, well almost, in the TAB1, or rel="#default" , its not working.

i can load external html and cufon its working XD!,

but on the default tab, when i come back, its not working :O. thanks XD

jscheuer1
03-11-2012, 03:41 AM
It would help to know what worked.

And I'm not surprised. The default tab isn't loaded via AJAX.

I'd try:


<script type="text/javascript">
document.onclick = function(e){
e = e || event;
var t = e.target || e.srcElement;
if(t.rel === '#default'){
Cufon.refresh();
}
};
</script>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Monclee
03-11-2012, 04:03 AM
yes ofcourse, this is the correct solution


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("linkparent") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
Cufon.refresh();
}



</script>




And for the issue on the #default tab dosent work, do i have to put that script on the header?

Monclee
03-11-2012, 04:07 AM
For the tab issue i solve it modifying your script, i refresh cufon on every clic but i dont think thats a problem


<script type="text/javascript">
document.onclick = function(){
Cufon.refresh();
}
</script>

jscheuer1
03-11-2012, 04:11 AM
You could, but it's code could go with what you have, and a little error checking wouldn't hurt, so we could have:


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer");
countries.setpersist(true);
countries.setselectedClassTarget("linkparent"); //"link" or "linkparent"
countries.init();

countries.onajaxpageload = function(pageurl){
if(typeof Cufon !== 'undefined'){
Cufon.refresh();
}
};

document.onclick = function(e){
e = e || event;
var t = e.target || e.srcElement;
if(t.rel === '#default' && typeof Cufon !== 'undefined'){
Cufon.refresh();
}
};

</script>

Monclee
03-11-2012, 04:21 AM
Thanks for that i just notice the tab when selected change the color of the text, but the "selected" tab wont change, do i make something wrong.

http://dreaminmedia.com/agatha/index.html

jscheuer1
03-11-2012, 04:46 AM
Unless the answer is, "Because it's already changed", you've lost me there.

Could you be more specific?

Monclee
03-11-2012, 04:49 AM
Its not changing the selected tab, the color of the text changes because of the :visited css, color, class="selected" its not changing

Monclee
03-11-2012, 04:55 AM
Yes sorry, Its not changing the Class="selected" tab,

the color of the text change because of a:visited on css, but script its not moving the "selected" class to the proper tab.

Thanks dont worry, it must be a conflict between one of the scripts im using :P jajaja

Ps: sorry i thougt last answer wasnt published.

jscheuer1
03-11-2012, 05:32 AM
I think I get it. With Cufon the markup changes. This:


<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="tabs/external2.htm" rel="countrycontainer">Featured Products</a></li>
<li><a href="tabs/external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="tabs/external4.htm" rel="countrycontainer">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

becomes (at least in most browsers, IE less than 9 or 8 may vary):


<ul id="countrytabs" class="shadetabs">
<li class="selected">
<a href="#" rel="#default" class="selected">
<cufon class="cufon cufon-canvas" alt="Tab " style="width: 24px; height: 12px">
<canvas width="37" height="15" style="width: 37px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Tab </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="1" style="width: 8px; height: 12px">
<canvas width="18" height="15" style="width: 18px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>1</cufontext>
</cufon>
</a>
</li>
<li class="">
<a href="tabs/external2.htm" rel="countrycontainer">
<cufon class="cufon cufon-canvas" alt="Featured " style="width: 60px; height: 12px">
<canvas width="73" height="15" style="width: 73px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Featured </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="Products" style="width: 63px; height: 12px">
<canvas width="74" height="15" style="width: 74px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Products</cufontext>
</cufon>
</a>
</li>
<li class="">
<a href="tabs/external3.htm" rel="countrycontainer">
<cufon class="cufon cufon-canvas" alt="Tab " style="width: 24px; height: 12px">
<canvas width="37" height="15" style="width: 37px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Tab </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="3" style="width: 8px; height: 12px">
<canvas width="18" height="15" style="width: 18px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>3</cufontext>
</cufon>
</a>
</li>
<li class="">
<a href="tabs/external4.htm" rel="countrycontainer">
<cufon class="cufon cufon-canvas" alt="Tab " style="width: 24px; height: 12px">
<canvas width="37" height="15" style="width: 37px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Tab </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="4" style="width: 8px; height: 12px">
<canvas width="18" height="15" style="width: 18px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>4</cufontext>
</cufon>
</a>
</li>
<li class="">
<a href="http://www.dynamicdrive.com">
<cufon class="cufon cufon-canvas" alt="Dynamic " style="width: 58px; height: 12px">
<canvas width="72" height="15" style="width: 72px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Dynamic </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="Drive" style="width: 32px; height: 12px">
<canvas width="43" height="15" style="width: 43px; height: 15px; top: -2px; left: -2px"></canvas>
<cufontext>Drive</cufontext>
</cufon>
</a>
</li>
</ul>

And because you have in your init:


countries.setselectedClassTarget("linkparent") //"link" or "linkparent"

The selected class is applied to the li, not to the a tag.

So for it to take effect you would need a rule like:


.shadetabs li.selected a {
color: red !important;
}

Or perhaps even:


.shadetabs li.selected a * {
color: red !important;
}

Notice the !important keyword. It may be required to override the styles for the Cufon created elements.

Monclee
03-11-2012, 05:53 AM
How do you do it?, jajaja you were right i just need to change

"linkparent" to "link" ..

thats perfect!, thanks a lot & as your signature said soon i would really show my thanks making a donation, im still waiting for someone to pay me, but i sweare i want Dynamic Drive to stay for a long time, :)