[Pro] How Do I Link An HTML Item To Another Page?

I know this might be stupid but I’ve wasted the last half hour trying to figure this out. Soooo frustrating…

I have an HTML item. Inside is some styled text. What I want to do is be able to click on the HTML item and load in the browser another page I’ve created. For aesthetic purposes, I don’t want to make a link out of the text in the html item. So, basically, I want to use the HTML item field as the ‘button’ to trigger the event. Oh, and I don’t want to spawn a new window; I want to load the new page in the same window.

Is this possible? It’s pretty easy in Dreamweaver and the old GoLive. Is there some action I’m missing?

Can anybody help? Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually it is not that easy as you cannot wrap a link around a div - no matter what software you are using and create valid code.

There are tricks to make this appear to be the case, usually with an image or with javascript.

Can you post a link to an online example to show us what you are trying to do.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is a javascript example http://www.deltadesign.co/pietest.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Heres a simple way to do it
http://cssway.thebigerns.com/workbench/div_as_button/

Make the link text fill the whole box… same difference.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is one wrinkle to this that I never new, discovered recently in a screencast (it was just part of an example), and was astounded to find it was valid:

<div><a …><div>something in here</div></a></div>

I had to run it through the validator twice, I couldn’t believe you could wrap a div in an A. But here’s the rub – you cannot have a div inside a P.

<div><p><a …><div>something in here</div></a></p></div>

That is indeed invalid. And Freeway won’t let you make it.

Walter

On Jun 10, 2012, at 1:10 AM, Ernie Simpson wrote:

Heres a simple way to do it
http://cssway.thebigerns.com/workbench/div_as_button/

Make the link text fill the whole box… same difference.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

knew, obviously. Damn auto-correct!

Walter

On Jun 10, 2012, at 9:50 AM, Walter Lee Davis wrote:

new


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, I’ve been playing around with your idea, (best part of my day
today:-) Haven’t had any success at validation though… Used your excellent
TagWrap action, but even when I try containing the anchor tag in another
div, the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work fine.

This updated example needs to be cleaned up, a bit, but should get the
point across.
http://cssway.thebigerns.com/workbench/div_as_button/

You can tell I was having all sorts of fun, and had to cut my play short
before too many years had passed :slight_smile:


Ernie Simpson

On Sun, Jun 10, 2012 at 9:58 AM, Walter Lee Davis email@hiddenwrote:

knew, obviously. Damn auto-correct!

Walter

On Jun 10, 2012, at 9:50 AM, Walter Lee Davis wrote:

new


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Apparently this is valid in HTML5, but not XHTML.

Put the following in a text file and validate it:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Button, button</title>
</head>
<body>
	<div id="PageDiv">
	 <a href="#"><div class="button">Click Me!</div></a>
	</div>
</body>
</html>

Walter

On Jun 10, 2012, at 4:17 PM, Ernie Simpson wrote:

the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work fine.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Curses, foiled again by progress and the passage of time!

Does anyone have an action to set the dtd to html5 format? I was thinking
your TagWrap could be used to set some of the other html5 tags (header,
section, etc.).


Ernie Simpson

On Sun, Jun 10, 2012 at 6:18 PM, Walter Lee Davis email@hiddenwrote:

Apparently this is valid in HTML5, but not XHTML.

Put the following in a text file and validate it:

   <!DOCTYPE html>
   <html>
   <head>
           <meta charset="utf-8" />
           <title>Button, button</title>
   </head>
   <body>
           <div id="PageDiv">
            <a href="#"><div class="button">Click Me!</div></a>
           </div>
   </body>
   </html>

Walter

On Jun 10, 2012, at 4:17 PM, Ernie Simpson wrote:

the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work
fine.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There was one floating around a while ago, I think Paul Dunning did it. I found it extremely easy to turn an XHTML page into HTML5 when I did the Sublime Player Action:

var doctype = fwDocument.fwTags.fwFind("!DOCTYPE");
if(doctype){
	doctype.fwFindEnclosing('').fwAddRaw('<!DOCTYPE html>', doctype);
	doctype.fwDelete();
}

That’s all that’s needed in an Action to do the transformation. Of course, that does not get you all the various elements, for that you would need another Action that you could apply to a normal HTML box and convert it. I don’t think TagWrap would be a good fit for this, because it adds another element outside of the element it’s applied to.

Walter

On Jun 10, 2012, at 7:05 PM, Ernie Simpson wrote:

Curses, foiled again by progress and the passage of time!

Does anyone have an action to set the dtd to html5 format? I was thinking
your TagWrap could be used to set some of the other html5 tags (header,
section, etc.).


Ernie Simpson

On Sun, Jun 10, 2012 at 6:18 PM, Walter Lee Davis email@hiddenwrote:

Apparently this is valid in HTML5, but not XHTML.

Put the following in a text file and validate it:

  <!DOCTYPE html>
  <html>
  <head>
          <meta charset="utf-8" />
          <title>Button, button</title>
  </head>
  <body>
          <div id="PageDiv">
           <a href="#"><div class="button">Click Me!</div></a>
          </div>
  </body>
  </html>

Walter

On Jun 10, 2012, at 4:17 PM, Ernie Simpson wrote:

the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work
fine.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, then perhaps something like TagWrap to apply to div in FWP (because
the container model visually makes sense in that environment), but replaces
the div on output with perhaps a user selectable drop-down list of the
relevant html5 containers. And removes the inline style or rewrites it to
the head like Advanced Inline Style Mover?


Ernie Simpson

On Sun, Jun 10, 2012 at 7:11 PM, Walter Lee Davis email@hiddenwrote:

There was one floating around a while ago, I think Paul Dunning did it. I
found it extremely easy to turn an XHTML page into HTML5 when I did the
Sublime Player Action:

   var doctype = fwDocument.fwTags.fwFind("!DOCTYPE");
   if(doctype){
           doctype.fwFindEnclosing('').fwAddRaw('<!DOCTYPE html>',

doctype);
doctype.fwDelete();
}

That’s all that’s needed in an Action to do the transformation. Of course,
that does not get you all the various elements, for that you would need
another Action that you could apply to a normal HTML box and convert it. I
don’t think TagWrap would be a good fit for this, because it adds another
element outside of the element it’s applied to.

Walter

On Jun 10, 2012, at 7:05 PM, Ernie Simpson wrote:

Curses, foiled again by progress and the passage of time!

Does anyone have an action to set the dtd to html5 format? I was thinking
your TagWrap could be used to set some of the other html5 tags (header,
section, etc.).


Ernie Simpson

On Sun, Jun 10, 2012 at 6:18 PM, Walter Lee Davis <email@hidden
wrote:

Apparently this is valid in HTML5, but not XHTML.

Put the following in a text file and validate it:

  <!DOCTYPE html>
  <html>
  <head>
          <meta charset="utf-8" />
          <title>Button, button</title>
  </head>
  <body>
          <div id="PageDiv">
           <a href="#"><div class="button">Click Me!</div></a>
          </div>
  </body>
  </html>

Walter

On Jun 10, 2012, at 4:17 PM, Ernie Simpson wrote:

the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work
fine.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, validates now :smiley: yay
http://cssway.thebigerns.com/workbench/div_as_button/


Ernie Simpson

On Sun, Jun 10, 2012 at 8:02 PM, Ernie Simpson email@hidden wrote:

Okay, then perhaps something like TagWrap to apply to div in FWP
(because the container model visually makes sense in that environment), but
replaces the div on output with perhaps a user selectable drop-down list of
the relevant html5 containers. And removes the inline style or rewrites it
to the head like Advanced Inline Style Mover?


Ernie Simpson

On Sun, Jun 10, 2012 at 7:11 PM, Walter Lee Davis email@hiddenwrote:

There was one floating around a while ago, I think Paul Dunning did it. I
found it extremely easy to turn an XHTML page into HTML5 when I did the
Sublime Player Action:

   var doctype = fwDocument.fwTags.fwFind("!DOCTYPE");
   if(doctype){
           doctype.fwFindEnclosing('').fwAddRaw('<!DOCTYPE html>',

doctype);
doctype.fwDelete();
}

That’s all that’s needed in an Action to do the transformation. Of
course, that does not get you all the various elements, for that you would
need another Action that you could apply to a normal HTML box and convert
it. I don’t think TagWrap would be a good fit for this, because it adds
another element outside of the element it’s applied to.

Walter

On Jun 10, 2012, at 7:05 PM, Ernie Simpson wrote:

Curses, foiled again by progress and the passage of time!

Does anyone have an action to set the dtd to html5 format? I was
thinking
your TagWrap could be used to set some of the other html5 tags (header,
section, etc.).


Ernie Simpson

On Sun, Jun 10, 2012 at 6:18 PM, Walter Lee Davis <email@hidden
wrote:

Apparently this is valid in HTML5, but not XHTML.

Put the following in a text file and validate it:

  <!DOCTYPE html>
  <html>
  <head>
          <meta charset="utf-8" />
          <title>Button, button</title>
  </head>
  <body>
          <div id="PageDiv">
           <a href="#"><div class="button">Click Me!</div></a>
          </div>
  </body>
  </html>

Walter

On Jun 10, 2012, at 4:17 PM, Ernie Simpson wrote:

the validator complains that you can’t contain block-level elements
with inline elements, though functionality and appearance seem to work
fine.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Dave… but where do I find the “Edit Name/Value?”

Let’s pretend I’m retarded, cause after two days of trying to figure this out I sure feel like it.

:frowning:

I appreciate your help!

On 9 Jun 2012, 11:23 pm, DeltaDave wrote:

Here is a javascript example http://www.deltadesign.co/pietest.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Select your Div - Item>Extended

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for your help Ernie (and Walt!). I booted up your project and took a look and while it works great I can’t seem to figure out how to implement it.

The first button, with the Advanced Inline Style Mover applied, works great… but for the life of me I cannot figure out WHERE the URL link goes so I can modify it.

The second button, with the Advanced Inline & TagWrap works great as well. And while I can easily see in the TagWrap action where to modify the url I can’t seem to strip the styles off of the text. I don’t want boxes or drop shadows or underlines or rollovers or anything. I’ve been able to remove all of that except the drop shadow under the text and the roll over effect.

Am I missing something? I’ve gone through all the properties and even though there’s no drop shadow or rollover selected it still appears.

Thanks again for all your effort. I truly appreciate it

On 11 Jun 2012, 6:58 am, The Big Erns wrote:

Okay, validates now :smiley: yay
http://cssway.thebigerns.com/workbench/div_as_button/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That was a bit short that answer -

Select your Div - Item>Extended

In the resulting dialogue box click New and create the Name/Value pair of

onclick

location.href"url of the site/page you want to link to"

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Am I missing something? I’ve gone through all the properties and even though there’s no drop shadow or rollover selected it still appears.

Look in the style inspector for the style - boxedge

If you study that style (Edit>Style from the Cog) you will see the shadow etc in the Extended section.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have NO idea what that means. “Style from the Cog?”

I flat out deleted the box edge style and while I have not visible box now (Yay!) I still have the text inside with drop shadow as well as a green pink rollover that I can’t get rid of.

On 11 Jun 2012, 4:55 pm, DeltaDave wrote:

If you study that style (Edit>Style from the Cog) you will see the shadow etc in the Extended section.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I did that… and can’t get it to work work. The div isn’t even recognized as a clickable element.

On 11 Jun 2012, 4:52 pm, DeltaDave wrote:

That was a bit short that answer -

Select your Div - Item>Extended

In the resulting dialogue box click New and create the Name/Value pair of

onclick

location.href"url of the site/page you want to link to"

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Post a link to your online example and we can dissect to point you to your error.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options