PDA

View Full Version : Ajax tabs help please



belowcost
04-02-2015, 10:52 PM
1) Script Title: Ajax Tabs Content Script /Dynamically selecting a tab/ loading an external page

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...?countrytabs=1

3) Describe problem:

I am using the Ajax version (not iframe)

using images for the buttons

Hover over images changes to a faded image, but onclick doesnt stay with an alternate image, after the page loads.

The header coding button and images are correct.

Ideas?

crlaurence.com/manuals is the URL

Thank you

jscheuer1
04-04-2015, 03:28 PM
http://crlaurence.com/manuals

is currently a 500 (internal server error).

If I change it to:

http://www.crlaurence.com/manuals

It takes me to:

http://www.crlaurence.com/apps/contentloader/default.aspx?content=www.crlaurence.com/adv/manuals/index.htm

Is that the page you want help with? On that page, it appears that the rollover images are currently 404 (not found).

Oh, asnd as the link to the DD demo page is broken, is this:

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

the DD script you are using?

belowcost
04-06-2015, 03:28 PM
You are correct on both accounts, the script, the long URL, and cache was cleared so those hover over images appear.

Would like to have an onclick change the image after clicking and the new page loads.

I have it coded, but it doesnt stay showing the alt image

Thank you


http://crlaurence.com/manuals

is currently a 500 (internal server error).

If I change it to:

http://www.crlaurence.com/manuals

It takes me to:

http://www.crlaurence.com/apps/contentloader/default.aspx?content=www.crlaurence.com/adv/manuals/index.htm

Is that the page you want help with? On that page, it appears that the rollover images are currently 404 (not found).

Oh, asnd as the link to the DD demo page is broken, is this:

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

the DD script you are using?

jscheuer1
04-06-2015, 06:01 PM
That's not a good way to do that. You end up having your own code working against you. Instead of having img tags, make the a tags be display block or possibly display inline-block if that works better. Then in a stylesheet, set the dimensions for the a tags to the same as the size of the images, and set their background images to be the images that go with them. make their css hover background images be the mouseover ones, and when they have a class of selected, make their background image also be the mouseover ones. That way you can get rid of all the img tags and all the onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup . . . events, and the script will take care of the rest (it already assigns a class of selected to the active a tag).

If you need help with that, let me know, I can make up a demo when I have more time.

belowcost
04-06-2015, 07:40 PM
Having the css show them as a background image makes sense, but I am lost on how to do the CSS to make them hover over to display a different background image (which it does now), but especially an onclick show a different background image

any assistance would be appreciated.


That's not a good way to do that. You end up having your own code working against you. Instead of having img tags, make the a tags be display block or possibly display inline-block if that works better. Then in a stylesheet, set the dimensions for the a tags to the same as the size of the images, and set their background images to be the images that go with them. make their css hover background images be the mouseover ones, and when they have a class of selected, make their background image also be the mouseover ones. That way you can get rid of all the img tags and all the onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup . . . events, and the script will take care of the rest (it already assigns a class of selected to the active a tag).

If you need help with that, let me know, I can make up a demo when I have more time.

jscheuer1
04-06-2015, 08:58 PM
OK, here's the markup for the menu (no img tags or mouseover/out/click events needed):


<ul id="countrytabs1" class="shadetabs">
<a id="help" href="/adv/manuals/help.html" rel="#countrycontainer1" class="selected"></a><br>
<a id="manam" href="/adv/manuals/am.htm" rel="#countrycontainer1"></a>
<a id="manauto" href="/adv/manuals/auto.htm" rel="#countrycontainer1"></a>
<a id="mancomm" href="/adv/manuals/commercial.htm" rel="#countrycontainer1"></a>
<a id="mandrwn" href="/adv/manuals/dw-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manfsd" href="/adv/manuals/fsd-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mangr" href="/adv/manuals/gr-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manjack" href="/adv/manuals/jackson.htm" rel="#countrycontainer1"></a>
<a id="mansw" href="/adv/manuals/sw-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mansbf" href="/adv/manuals/sbf-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mantools" href="/adv/manuals/tools.htm" rel="#countrycontainer1"></a>
<a id="mantrans" href="/adv/manuals/trans-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manusal" href="/adv/manuals/usal.html" rel="#countrycontainer1"></a>
</ul>

And here are the styles to use (highlighted and added to the existing on page stylesheet - but these styles could go in an external stylesheet for the page if desired):


<style type="text/css">
body {color:#000069;font-size:11pt;font-family:Arial;}
#countrydivcontainer1{width:780px;}

#bottomBanner img {
margin: 0 auto;
border: 1px solid #006699;
}
.shadetabs a {
display: inline-block;
width: 63px;
height: 50px;
background: center no-repeat;
}
.shadetabs a#help {
width: 800px;
height: 90px;
background-image: url('/adv/manuals/images/installation-Manuals.png');
}
.shadetabs a#manam {
background-image: url('/adv/manuals/images/home-but_r1_c1.gif');
}
.shadetabs a#manam:hover, .shadetabs a#manam.selected {
background-image: url('/adv/manuals/images/home-but_r2_c1.gif');
}
.shadetabs a#manauto {
background-image: url('/adv/manuals/images/home-but_r1_c2.gif');
}
.shadetabs a#manauto:hover, .shadetabs a#manauto.selected {
background-image: url('/adv/manuals/images/home-but_r2_c2.gif');
}
.shadetabs a#mancomm {
background-image: url('/adv/manuals/images/home-but_r1_c3.gif');
}
.shadetabs a#mancomm:hover, .shadetabs a#mancomm.selected {
background-image: url('/adv/manuals/images/home-but_r2_c3.gif');
}
.shadetabs a#mandrwn {
background-image: url('/adv/manuals/images/home-but_r1_c4.gif');
}
.shadetabs a#mandrwn:hover, .shadetabs a#mandrwn.selected {
background-image: url('/adv/manuals/images/home-but_r2_c4.gif');
}
.shadetabs a#manfsd {
background-image: url('/adv/manuals/images/home-but_r1_c5.gif');
}
.shadetabs a#manfsd:hover, .shadetabs a#manfsd.selected {
background-image: url('/adv/manuals/images/home-but_r2_c5.gif');
}
.shadetabs a#mangr {
background-image: url('/adv/manuals/images/home-but_r1_c6.gif');
}
.shadetabs a#mangr:hover, .shadetabs a#mangr.selected {
background-image: url('/adv/manuals/images/home-but_r2_c6.gif');
}
.shadetabs a#manjack {
background-image: url('/adv/manuals/images/home-but_r1_c7.gif');
}
.shadetabs a#manjack:hover, .shadetabs a#manjack.selected {
background-image: url('/adv/manuals/images/home-but_r2_c7.gif');
}
.shadetabs a#mansw {
background-image: url('/adv/manuals/images/home-but_r1_c8.gif');
}
.shadetabs a#mansw:hover, .shadetabs a#mansw.selected {
background-image: url('/adv/manuals/images/home-but_r2_c8.gif');
}
.shadetabs a#mansbf {
background-image: url('/adv/manuals/images/home-but_r1_c9.gif');
}
.shadetabs a#mansbf:hover, .shadetabs a#mansbf.selected {
background-image: url('/adv/manuals/images/home-but_r2_c9.gif');
}
.shadetabs a#mantools {
background-image: url('/adv/manuals/images/home-but_r1_c10.gif');
}
.shadetabs a#mantools:hover, .shadetabs a#mantools.selected {
background-image: url('/adv/manuals/images/home-but_r2_c10.gif');
}
.shadetabs a#mantrans {
background-image: url('/adv/manuals/images/home-but_r1_c11.gif');
}
.shadetabs a#mantrans:hover, .shadetabs a#mantrans.selected {
background-image: url('/adv/manuals/images/home-but_r2_c11.gif');
}
.shadetabs a#manusal {
background-image: url('/adv/manuals/images/home-but_r1_c12.gif');
}
.shadetabs a#manusal:hover, .shadetabs a#manusal.selected {
background-image: url('/adv/manuals/images/home-but_r2_c12.gif');
}
</style>

Any questions, let me know.

belowcost
04-06-2015, 09:37 PM
GREAT solution..THANK YOU.. I am going to go back to learn some more in depth about this topic,



OK, here's the markup for the menu (no img tags or mouseover/out/click events needed):


<ul id="countrytabs1" class="shadetabs">
<a id="help" href="/adv/manuals/help.html" rel="#countrycontainer1" class="selected"></a><br>
<a id="manam" href="/adv/manuals/am.htm" rel="#countrycontainer1"></a>
<a id="manauto" href="/adv/manuals/auto.htm" rel="#countrycontainer1"></a>
<a id="mancomm"href="/adv/manuals/commercial.htm" rel="#countrycontainer1"></a>
<a id="mandrwn" href="/adv/manuals/dw-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manfsd" href="/adv/manuals/fsd-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mangr" href="/adv/manuals/gr-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manjack" href="/adv/manuals/jackson.htm" rel="#countrycontainer1"></a>
<a id="mansw" href="/adv/manuals/sw-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mansbf" href="/adv/manuals/sbf-hdwe.htm" rel="#countrycontainer1"></a>
<a id="mantools" href="/adv/manuals/tools.htm" rel="#countrycontainer1"></a>
<a id="mantrans" href="/adv/manuals/trans-hdwe.htm" rel="#countrycontainer1"></a>
<a id="manusal" href="/adv/manuals/usal.html" rel="#countrycontainer1"></a>
</ul>

And here are the styles to use (highlighted and added to the existing on page stylesheet - but these styles could go in an external stylesheet for the page if desired):


<style type="text/css">
body {color:#000069;font-size:11pt;font-family:Arial;}
#countrydivcontainer1{width:780px;}

#bottomBanner img {
margin: 0 auto;
border: 1px solid #006699;
}
.shadetabs a {
display: inline-block;
width: 63px;
height: 50px;
background: center no-repeat;
}
.shadetabs a#help {
width: 800px;
height: 90px;
background-image: url('/adv/manuals/images/installation-Manuals.png');
}
.shadetabs a#manam {
background-image: url('/adv/manuals/images/home-but_r1_c1.gif');
}
.shadetabs a#manam:hover, .shadetabs a#manam.selected {
background-image: url('/adv/manuals/images/home-but_r2_c1.gif');
}
.shadetabs a#manauto {
background-image: url('/adv/manuals/images/home-but_r1_c2.gif');
}
.shadetabs a#manauto:hover, .shadetabs a#manauto.selected {
background-image: url('/adv/manuals/images/home-but_r2_c2.gif');
}
.shadetabs a#mancomm {
background-image: url('/adv/manuals/images/home-but_r1_c3.gif');
}
.shadetabs a#mancomm:hover, .shadetabs a#mancomm.selected {
background-image: url('/adv/manuals/images/home-but_r2_c3.gif');
}
.shadetabs a#mandrwn {
background-image: url('/adv/manuals/images/home-but_r1_c4.gif');
}
.shadetabs a#mandrwn:hover, .shadetabs a#mandrwn.selected {
background-image: url('/adv/manuals/images/home-but_r2_c4.gif');
}
.shadetabs a#manfsd {
background-image: url('/adv/manuals/images/home-but_r1_c5.gif');
}
.shadetabs a#manfsd:hover, .shadetabs a#manfsd.selected {
background-image: url('/adv/manuals/images/home-but_r2_c5.gif');
}
.shadetabs a#mangr {
background-image: url('/adv/manuals/images/home-but_r1_c6.gif');
}
.shadetabs a#mangr:hover, .shadetabs a#mangr.selected {
background-image: url('/adv/manuals/images/home-but_r2_c6.gif');
}
.shadetabs a#manjack {
background-image: url('/adv/manuals/images/home-but_r1_c7.gif');
}
.shadetabs a#manjack:hover, .shadetabs a#manjack.selected {
background-image: url('/adv/manuals/images/home-but_r2_c7.gif');
}
.shadetabs a#mansw {
background-image: url('/adv/manuals/images/home-but_r1_c8.gif');
}
.shadetabs a#mansw:hover, .shadetabs a#mansw.selected {
background-image: url('/adv/manuals/images/home-but_r2_c8.gif');
}
.shadetabs a#mansbf {
background-image: url('/adv/manuals/images/home-but_r1_c9.gif');
}
.shadetabs a#mansbf:hover, .shadetabs a#mansbf.selected {
background-image: url('/adv/manuals/images/home-but_r2_c9.gif');
}
.shadetabs a#mantools {
background-image: url('/adv/manuals/images/home-but_r1_c10.gif');
}
.shadetabs a#mantools:hover, .shadetabs a#mantools.selected {
background-image: url('/adv/manuals/images/home-but_r2_c10.gif');
}
.shadetabs a#mantrans {
background-image: url('/adv/manuals/images/home-but_r1_c11.gif');
}
.shadetabs a#mantrans:hover, .shadetabs a#mantrans.selected {
background-image: url('/adv/manuals/images/home-but_r2_c11.gif');
}
.shadetabs a#manusal {
background-image: url('/adv/manuals/images/home-but_r1_c12.gif');
}
.shadetabs a#manusal:hover, .shadetabs a#manusal.selected {
background-image: url('/adv/manuals/images/home-but_r2_c12.gif');
}
</style>

Any questions, let me know.