logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-15-2011, 02:42 PM   #1
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default Add "active page"-class to a menu imported with SSI?

Tricky question which might not be solved..? But ill give it a try anyway, maybe someone else has the brains to figure it out:

In the menu i have added a class with a different color for pointing out which item in menu is currently selected. In this ex item 2 is selected:

<div id="ddmenuwrap" >

<ul id="ddmenu">
<li><a href="index.shtml" >Item 1</a></li>

<li><a href="item-2.shtml" class="menuselected">Item 2</a></li>
</ul>

</div><!-- END OF DD-MENU-->

When i store the above menu in a remote document and import it into the .shtml as a Server Side Include (SSI), it will look like this:

<div id="ddmenuwrap" >
<!--#include virtual="/site/ssi/menu.html"-->
</div><!-- END OF DD-MENU-->

Is there any way i can still use class="menuselected" for pages currently selected, when the menu is imported with SSI?
henryhayes is offline   Reply With Quote
Old 08-15-2011, 08:20 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Not with a simple include, no.
domedia is offline   Reply With Quote
Old 08-15-2011, 09:40 PM   #3
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

This video explains how to highlight the current page in a Spry menubar on a template-based page but the method used should give you an idea of what's involved in doing what you want: http://www.dwcourse.com/dreamweaver/...e-template.php
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 08-15-2011, 10:14 PM   #4
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Thx for reply Domedia.
Thats what i thought.

Using SSI for "remote" controlling entire dropdown-menu for +30 pages is time-saving + flexible.

But your answer contains the word "simple".. do you have an idea of which direction to go when using a complicated solution?
henryhayes is offline   Reply With Quote
Old 08-15-2011, 10:16 PM   #5
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

DWcourse you posted while i was typing. Ill take at look at the link. Thanks
henryhayes is offline   Reply With Quote
Old 08-16-2011, 04:09 AM   #6
ranjan
 
Join Date: Dec 2004
Posts: 405
Default html 5 data attribute

Code:

http://jsbin.com/uyiziz/edit#javascript,html

In Action:
http://jsbin.com/uyiziz/edit#preview
ranjan is offline   Reply With Quote
Old 08-16-2011, 02:04 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Hi Ranjan,

Is this all related to SSI, is that why I don't understand it?

It's great to see you name again on the forms btw!
domedia is offline   Reply With Quote
Old 08-16-2011, 10:09 PM   #8
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

Quote:
Is this all related to SSI, is that why I don't understand it?
I dont get your question

Quote:
It's great to see you name again on the forms btw!
Thanks
ranjan is offline   Reply With Quote
Old 08-17-2011, 04:15 AM   #9
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by ranjan View Post
I dont get your question
Nevermind, I was trying to get your example to work, and I was confuzzled why it didn't.

Do you know the browser support for HTML 5 custom data attributes?
domedia is offline   Reply With Quote
Old 08-17-2011, 05:05 AM   #10
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

Browser support is good for all A grade browser and IE6

For the HTML below:
Code:
<div id="test" data-test="tester">
Code:
var t = document.getElementById('test');
console.log(t.dataTest);
should work.

Also you can use getAttribute if you want to access the data attrib

However jquery makes using the data attrib really exciting.

http://api.jquery.com/data
http://api.jquery.com/jQuery.data/
http://api.jquery.com/jQuery.hasData/
http://api.jquery.com/removeData/
ranjan is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:55 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com