CSS Codes
CSS Layouts
Results 1 to 7 of 7

Thread: Ajax tabs help please

  1. 04-02-2015, 10:52 PM #1
    belowcost
    belowcost is offline New Comer (less than 5 posts)
    Join Date
    Apr 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ajax tabs help please

    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
    Reply With Quote Reply With Quote
  2. 04-04-2015, 03:28 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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/dynamici...tent/index.htm

    the DD script you are using?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 04-06-2015, 03:28 PM #3
    belowcost
    belowcost is offline New Comer (less than 5 posts)
    Join Date
    Apr 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default you are correct

    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

    Quote Originally Posted by jscheuer1 View Post
    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/dynamici...tent/index.htm

    the DD script you are using?
    Reply With Quote Reply With Quote
  4. 04-06-2015, 06:01 PM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  5. 04-06-2015, 07:40 PM #5
    belowcost
    belowcost is offline New Comer (less than 5 posts)
    Join Date
    Apr 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

    Quote Originally Posted by jscheuer1 View Post
    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.
    Reply With Quote Reply With Quote
  6. 04-06-2015, 08:58 PM #6
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    <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):

    Code:
    <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.
    Last edited by jscheuer1; 04-07-2015 at 01:10 AM. Reason: fix minor typo - no effect on utility
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  7. 04-06-2015, 09:37 PM #7
    belowcost
    belowcost is offline New Comer (less than 5 posts)
    Join Date
    Apr 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    GREAT solution..THANK YOU.. I am going to go back to learn some more in depth about this topic,


    Quote Originally Posted by jscheuer1 View Post
    OK, here's the markup for the menu (no img tags or mouseover/out/click events needed):

    HTML Code:
    <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):

    Code:
    <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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Seperate color the tabs for Ajax Tabs Content Script
    By Bezoeker in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-12-2013, 07:19 PM
  2. AJAX Tabs Script - Stop caching of default tabs
    By strummer75 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-04-2008, 05:16 PM
  3. ajax tabs multiple nested tabs doesnt work?
    By pinkstone in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-08-2008, 06:51 PM
  4. Ajax Tabs Content script - unable to load external .js files for one of the tabs
    By illibaro in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-29-2007, 10:03 PM
  5. Ajax Tabs Content Script - Dynamically Selecting Tabs
    By wence in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-04-2007, 01:47 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules