Highlighted

target pseudo class not working in Dreamweaver

Community Beginner ,
Jan 14, 2019

Copy link to clipboard

Copied

Hi Folks,

I'm trying to use the target pseudo class to open/close a menu and I find that, while the code works in Firefox (version 64), it doesn't work in Dreamweaver (2018) itself. I've done a community search and see no discussion of this so I'm left thinking it's a problem with my coding, but I can't find it.

Thanks for any help/insight you can provide!

Here is my simple test: (this works on CodePen)

<style>

#bttnBox {

            width:100px;

            height:100px;

            border: 1px solid black;

            position: relative;

        }

        #openBttn {

            position: absolute;

            width:50px;

            height:50px;

            top:0px;

            left:0px;

            background-color:orange;

        }

        #closeBttn {

            position: absolute;

            width:50px;

            height:50px;

            top:0px;

            right:0px;

            background-color:aqua;

            display:none;

        }

        #closeBttn:target {

            display: block;

        }

</style>

<body>

<div id="bttnBox">

        <div><a href="#closeBttn" id="openBttn"></a></div>

        <div><a href="#body" id="closeBttn"></a></div>

    </div>

</body>

In my attempts to do this I've also transferred code for this function (menu opening) to Dreamweaver and it also doesn't work, though it works in the browser.

TOPICS
Create menus in Dreamweaver

Views

643

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

target pseudo class not working in Dreamweaver

Community Beginner ,
Jan 14, 2019

Copy link to clipboard

Copied

Hi Folks,

I'm trying to use the target pseudo class to open/close a menu and I find that, while the code works in Firefox (version 64), it doesn't work in Dreamweaver (2018) itself. I've done a community search and see no discussion of this so I'm left thinking it's a problem with my coding, but I can't find it.

Thanks for any help/insight you can provide!

Here is my simple test: (this works on CodePen)

<style>

#bttnBox {

            width:100px;

            height:100px;

            border: 1px solid black;

            position: relative;

        }

        #openBttn {

            position: absolute;

            width:50px;

            height:50px;

            top:0px;

            left:0px;

            background-color:orange;

        }

        #closeBttn {

            position: absolute;

            width:50px;

            height:50px;

            top:0px;

            right:0px;

            background-color:aqua;

            display:none;

        }

        #closeBttn:target {

            display: block;

        }

</style>

<body>

<div id="bttnBox">

        <div><a href="#closeBttn" id="openBttn"></a></div>

        <div><a href="#body" id="closeBttn"></a></div>

    </div>

</body>

In my attempts to do this I've also transferred code for this function (menu opening) to Dreamweaver and it also doesn't work, though it works in the browser.

TOPICS
Create menus in Dreamweaver

Views

644

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

If you are trying to toggle between a gold and teal box, then your code works in Firefox, Chrome, and Microsoft Edge. Dreamweaver Live View should never be used to actually test a page... no matter what Adobe says

See if this page provides easier to follow examples:

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Community Beginner ,
Jan 14, 2019

Copy link to clipboard

Copied

Thanks for checking it. I've seen that it works online, but I'm frustrated by it not working in Dreamweaver ... it slows the coding process down, bouncing between the program and browser. I do ultimately check things out online, but during the writing process it's confusing when there's no response in DW.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

If you set up Dreamweaver Preview In Browser then all it takes is F-12 and some habit-changing muscle memory. I've been using Dreamweaver for 22 years. It's up to you, but it's pretty much a foregone conclusion that relying on Dreamweaver's Live View can be harmful to one' sanity

I'd give Adobe 5-10 years to get Live View "optimized".

But you are the captain of your ship.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 1
LEGEND ,
Jan 14, 2019

Copy link to clipboard

Copied

Cannot remember which key combination exactly, but you have to press ctrl or shift whilst clicking on the element. CEF, (Dw's live view engine) has required this since CEF was introduced.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 1
Adobe Community Professional ,
Jan 14, 2019

Copy link to clipboard

Copied

To test links in Live View, use Ctrl+click.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 1
LEGEND ,
Jan 14, 2019

Copy link to clipboard

Copied

Thanks Nancy, I knew it was a key/click combination, just could not remember exactly which.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

Just an FYI, but the original poster's actual posted code, when placed in a new document in Dreamweaver CS6, works in Live View

Just saying.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Adobe Community Professional ,
Jan 14, 2019

Copy link to clipboard

Copied

It also works in an error free document within 2019. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

It also works in an error free document within 2019. 

Not sure what the "error free" reference means. So, to get links to work in Live View 2019 you have to enable something that you don't need to in CS6?

Forgive the question, but I use Creative Cloud apps very infrequently. Only to test our extensions, actually.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Adobe Community Professional ,
Jan 14, 2019

Copy link to clipboard

Copied

ALsp  wrote

Not sure what the "error free" reference means.

Simply that the document I'm using contains no code errors.   See screenshots below.

A green checkmark in a circle denotes error free code.

A red X in a circle denotes errors.

Al things being equal, Dw CC prefers clean code.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

Al things being equal, Dw CC prefers clean code.

Thanks for using my name, but what do errors have to do with this? I prefer clean code, but... well, I guess this is a classic example of how threads on this forum go off on tangents

Nice fonts and colors, by the way. Are those default? I've never seen such a thing in Dreamweaver 19 (just kidding, no need to answer).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Adobe Community Professional ,
Jan 14, 2019

Copy link to clipboard

Copied

ALsp  wrote

what do errors have to do with this?

The OP's partical code contains errors --  missing </head> and </html> tag. 

We have no way of knowing what other errors his code may contain.

My point was that error-free code does work for me in Dw CC.  That's all. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

The OP's partical code contains errors --  missing </head> and </html> tag. 

We have no way of knowing what other errors his code may contain.

Here we go .

I do believe that the original coder provided 2 logical blocks of code:

1. CSS

2. Markup

I might be wrong, but I do not he meant it to be an entire document.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Adobe Community Professional ,
Jan 14, 2019

Copy link to clipboard

Copied

ALsp  wrote

I might be wrong, but I do not he meant it to be an entire document.

That's why I don't like partial code.  It makes the rest of us guess what the OP is working with.  It could be complete or it could be riddled with other errors we don't know about.    

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Mentor ,
Jan 14, 2019

Copy link to clipboard

Copied

A good diagnostician sometimes has to make certain assumptions. All we can do is try.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2019 0
Community Beginner ,
Jan 16, 2019

Copy link to clipboard

Copied

Wow, quite a go around here. Thanks for all the input!

I use DW to check what's 'really' going on all the time, but my version of it, 2018, sure can be slow to update, and that it won't show the :target show/hide in action is disappointing.

Cheers!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2019 0