Solved

CKEditor breaking code & asp

Posted on 2013-05-12
12
426 Views
Last Modified: 2013-11-03
On my page here I need to make each advert a whole link to the full page, as currently they have to click the company name which isn't enough due to the large bg hovers - the whole ad needs to be a link.

The problem is my developer had the silly idea of placing the 'EnhancedAdvertTemplate' in a the CKEditor 'content editor' for me to edit, and didn't realise I work in html frequently so I don't need it.

The problem with the CKEditor is that I can't edit the advert template to be a full link - every time I add an `<a>` tag to wrap the advert, the editor breaks the code and places the closing `</a>` right after the opening `<a>` - whereas it should be at the very end of the template so the link covers the full advert.

E.g.

    <div class="enhancedAdTemplate Advert" id="Ad[AdPosition]">
     **<a href="http://inside-guides.co.uk<!--FullAdURL-->">**
    	<ul class="phone-web ">
    <li><!--PhoneNumber--></li>
    <li><!--WebLink--></li>
    </ul>
    	<h2>[CompanyNameText]</h2>
    	<div class="logo"><!--ClientLogo--></div>
    	<ul class="contact">
    		<li><!--ContactAddress1--></li>
    		<li><!--ContactAddress2--></li>
    		<li><!--ContactTown--></li>
    		<li><!--ContactCounty--></li>
    		<li><!--ContactPostcode--></li>
    	</ul>
    	<div class="tab aboutus">[SummaryText]</div>
    <!--FullAdLink-->
    <!--ReferToFriendLink-->	
    <div class="category"><!--Category--> in [Session:PublicFranchiseName]</div>
    **</a>**
    </div>

Open in new window



Then there's the asp page where he calls the EnhancedAdvertTemplate from the ckeditor:

 <table class="dir" cellpadding="0" cellspacing="0">
<%
		adMode = ""
		adPosition = 1
			While Not rsDB_Ads.EOF
			
			if adMode = "" AND ""&rsDB_Ads("EnhancedListing") = "True" then 
				%><tr><td align="left" valign="baseline"><div class="dir_sub"></div></td></tr><%
				adMode = "Enhanced"
			end if
			
			if not adMode = "Standard" AND ""&rsDB_Ads("EnhancedListing") <> "True" then 
				%><tr><td><div class="dir_sub standard"></div></td></tr><%
				adMode = "Standard"
			end if
			
            strDB_ThisAdvertTemplate = rsDB_Ads("AdvertViewTemplate")
            If IsNull(strDB_ThisAdvertTemplate) OR strDB_ThisAdvertTemplate = "" then
				if adMode = "Enhanced" then
	                strDB_ThisAdvertTemplate = GetContent("DirectoryBrowser_Advert_EnhancedTemplate", Session("PublicFranchiseGID"))
				else
					strDB_ThisAdvertTemplate = GetContent("DirectoryBrowser_Advert_StandardTemplate", Session("PublicFranchiseGID"))
				end if
            End if
            ' Handle Rows
            If iDB_RenderLastRow= 0 then
                ' Start Of Table
                %><tr><%
            ElseIf iDB_RenderRow > iDB_RenderLastRow then 
                ' Next Line
                %></td></tr><tr><%
            End if
            If iDB_RenderLastColumn = 0 then
                ' New Row Column
                %><td align="left" valign="top"><%
            ElseIf iDB_RenderColumn > iDB_RenderLastColumn then
                ' Next Column
                %></td><td align="left" valign="top"><%
            End if
            
            ' Refresh Item Template, and Merge Values
            strDB_AdvertItem = strDB_ThisAdvertTemplate
            strTempHTML = ""
            %><!--#include virtual="/PageObjects/DirectoryBrowser/i_DirectoryAdvert.asp"--><%          
            ' Write out the Directory Item
            Response.Write strDB_AdvertItem
            
            if 1 = 2 and iDB_RenderColumn > iDB_RenderLastColumn then
                %><td align="left" valign="top"><%
                 %></td><%
            End if
            ' Reset "Last" details
            iDB_RenderLastRow = iDB_RenderRow
            iDB_RenderLastColumn = iDB_RenderColumn
            ' Set "Next" details
            iDB_RenderColumn = iDB_RenderColumn + 1
            If iDB_RenderColumn > iDB_AdvertPageWidth then
                iDB_RenderRow = iDB_RenderRow + 1
                iDB_RenderLastColumn = 0
                iDB_RenderColumn = 1
            End if
            rsDB_Ads.MoveNext
			adPosition = adPosition + 1
        Wend
        %>
    </table>

Open in new window


Basically, is there a way I can add an <a> tag in the asp or somehow get it work in the editor?

Hoping someone can help as it's a bit confusing! Many thanks.
0
Comment
Question by:UName10
  • 6
  • 5
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39159488
Pre HTML5 you cannot wrap a inline element around a block element. Which is probably why its breaking - what doctype are you using?
You could revert to an onclick event.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39159821
I would just use jquery to loop through each of of the td's in table with class "dir".  Then grab the attribute href from the h2 onclick.  From there make the entire tr clickable.    That would not be the best for SEO though. I would also like to see the asp written with a direct link in the advert tr td so it can be clicked without js.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39159827
Check the page using chrome or firefox console.  There are a couple of errors on the page where a file is missing and that will muck up your js functions.
0
 

Author Comment

by:UName10
ID: 39160036
Thanks for the replies, could you perhaps point me to how I can wrap the <a> without javascript - i.e. where in the code it needs to go?

Not sure which <tr> it is...

The <a> needs to go around .Advert which is called in from the CKeditor..
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39160044
The problem as Dave pointed out you can end up with using xhtml

<a href="http://somelink.com"><div class="advert">content</div></a>
0
 

Author Comment

by:UName10
ID: 39160093
Just a thought, can I place the advert templates code in an asp file and have include in here instead?

If IsNull(strDB_ThisAdvertTemplate) OR strDB_ThisAdvertTemplate = "" then
        if adMode = "Enhanced" then
            strDB_ThisAdvertTemplate = [b]GetContent("DirectoryBrowser_Advert_EnhancedTemplate", Session("PublicFranchiseGID"))[/b]
        else
            strDB_ThisAdvertTemplate = [b]GetContent("DirectoryBrowser_Advert_StandardTemplate", Session("PublicFranchiseGID"))[/b]
        end if
    End if

Open in new window


Thanks again
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39160283
The issue is the final rendered html.  I would work backwards and start with the what the final html should be and work the asp to create the end result.    

The way the page is set up  now is visually nice on the outside.  You do have a hard link but I would like to see the link built without javascript or at least have a fall back so google can acces it.  

Otherwise, to answer your original question on how to make the entire row become a link as it lights up is going to need javascript/jquery because the code will not work.

Example
This is not good in xhtml or html5
<table>
    <a href="http://www.somepage.com"><tr><td>this is a row</td><tr></a>
</table>

Open in new window

This is not good in xhtml but good in html5
 
<a href="http://www.somepage.com"><div>stuff</div></a>

Open in new window


Since your current table thing will not work in xhtml, you need to use jquery to make it work.  Your other option is to recode the adverts to use div's and not tables but then you would need to change the page to html5 and not xhtml.    Since you already have the page made up in xhtml, it might be easier to use jquery.   The choice is up you.  If you are avoiding using jquery because you are not proficient, that can be worked out.
0
 

Author Comment

by:UName10
ID: 39161167
Hi thanks for the reply. Jquery doesn't solve the issue, but just compounds it as there's no need to use it as you understand. The code for that page needs redoing entirely which my developer will do, but for now I wanted to fix this one thing.. Jquery/script isn't the answer though; it's only an <a> tag and should be done in asp or via an include if possible.

So jquery for this is not an option for many reasons, not least because there's no need for it. Unfortunately it was coded a while ago and he should never have put the advert template in the ckeditor, I'll try an include and transfer the template html to the root.

Thanks again.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39161984
I understand. I was just offering as a work around.  Otherwise, the only thing to do is wait until your developer rebuilds whatever they need to do. I would suggest you create the page in static html the way you want it have the developer make the dynamic portion fit your needs.  

As is, there is no way to make the entire table row inside an href as that will not work.  Or am I not understanding what you want to do?  From what I understand you want to make the portion of code below clickable.   The problem is you can't simply wrap the tr or td tag inside an a tag.
    <tr>
          <td align="left" valign="top"><div class="enhancedAdTemplate Advert" id="Ad1">
              <ul class="phone-web ">
                <li>01277 213333</li>
                <li><a href='http://www.myviolethill.com/' onclick="pageTracker._trackPageview('/WEBSITE/http://www.myviolethill.com/');" target='_blank' rel='nofollow'><span>»</span> Website</a><br />
                </li>
              </ul>
              <h2><a onclick="pageTracker._trackPageview('/ADVERT/My Violet Hill Boutique');" href='/brentwood/shops-and-shopping/clothes-shops/my-violet-hill-boutique-560.html'>My Violet Hill Boutique</a></h2>
              <div class="logo"><img src='/LiveStorage/Uploads/Image/Client Logos/C379194B-0013-47FD-8188-60C542AE69BB.jpg' alt='My Violet Hill Boutique' /></div>
              <ul class="contact">
                <li>21, Crown Street,</li>
                <li></li>
                <li>Brentwood,</li>
                <li>Essex,</li>
                <li>CM14 4BA</li>
              </ul>
              <div class="tab aboutus">Since launching the MyVioletHill.com website for womens clothes online the company has successfully established itself as providing the best, most exciting, unique and on-trend womens clothes and accessories.</div>
              <a class="fullstd" onclick="pageTracker._trackPageview('/FULL_AD/[FullAdLink]');" href='/brentwood/shops-and-shopping/clothes-shops/my-violet-hill-boutique-560.html'>view profile</a>&nbsp; <a class="refer" href="/ReferToFriend.asp?CAGID={C379194B-0013-47FD-8188-60C542AE69BB}">send advert</a>&nbsp;
              <div class="category">Clothes Shops in Brentwood</div>
            </div></td>
        </tr>

Open in new window


You can try adding the <a> tag around the div portion  so you end up with
<a href="http://www.myviolethill.com/">
<div class="enhancedAdTemplate Advert" id="Ad1">
:
:
<div class="category">Clothes Shops in Brentwood</div>
</a>

Open in new window

I know this would work if the page was set as html but I don't think it will work as xhtml.

If I missed your point, I am sorry....
0
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 39167729
No don't worry, it's difficult to tell... I'll probably just get him to change it or transfer the template into html. Thanks for the help though.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39609749
>No don't worry, it's difficult to tell... I'll probably just get him to change it or transfer the template into html. Thanks for the help though.

Edit:  Sometimes the answer is no answer  http://support.experts-exchange.com/customer/portal/articles/755964  

We do spend time to try and help you, did nothing in this thread help you come to your conclusion?
0
 

Author Closing Comment

by:UName10
ID: 39619683
No solution
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now