Multiple problems when using html preview

Post anything about TopStyle here. NOTE: TopStyle has been discontinued.

Moderator: TopStyle Support

JoeB
Rank II - Novice
Rank II - Novice
Posts: 30
Joined: Wed Nov 21, 2012 4:14 pm

Multiple problems when using html preview

Post by JoeB » Thu Nov 29, 2012 7:15 pm

These might not be bugs, maybe im doing something wrong.

TS5 on Win7, IE8, html file loaded into the editor.

I have sync editor with preview enabled, and im using IE8 as the previewer. Sometimes, the program highlights in the editor the text i select in the preview, sometimes it doesn't ?

When i turn off sync editor, and enable sync preview with editor position, no matter where i click in the editor, the preview doesn't move.

Is there a way to set the program to always use IE8 as the previewer?

When using boxspy, the element identifiers (the css applied rules shown above the ruler, below the preview file viewer) appears to show and hide at random.

When using boxspy, the tooltip that shows the box dimensions only remains visable for 5 seconds. Can this be changed so it remains visable as long as the box outline is shown?

Why is the CSS selectors panel not showing the applied class when i select a element in the html file? I would have thought this panel would jump to the correct CSS for the selected html element; instead i have to ctrl+click on the class.
This makes it hard to quickly see what CSS styles apply to an element. I have to use chrome "inspect element" to see the applied style, which again doesnt work when chrome is selected as the previewer, so i have to open an instance of chrome. It would be better if this was intergrated, like it is in stylemaster.
In stylemaster, i can click anything in the proview, and it shows me instantly what CSS styles are applied to the element, image, link etc. It also doesnt follow links, so if i click on a link, it remains on the same page (ignores the fact its a link). TS5 doesnt do this, and for this reason, i cant uninstall stylemaster. boo.

JoeB
Rank II - Novice
Rank II - Novice
Posts: 30
Joined: Wed Nov 21, 2012 4:14 pm

Re: Multiple problems when using html preview

Post by JoeB » Thu Nov 29, 2012 7:48 pm

also, code folding within html files appears to not be implemented.

Ctrl+clicking this:

<span class="navy arrow arrow-navy">

Confuses the editor. It jumps to a random position. It should separate the different classes used (navy, arrow, arrow-navy), and underline/jump to the one clicked, not allow all of them to be clicked at the same time.

Search doesn't wrap when clicked multiple times. Select "from top" as soon as the item is found, and the search reaches the end of the file, another click shows a message saying not found instead of going back to the top of the file.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Fri Nov 30, 2012 1:20 am

JoeB wrote:When i (..) enable sync preview with editor position, no matter where i click in the editor, the preview doesn't move.
You need to change something in the editor, and then move the caret to another line (HTML) or another position (CSS). This will force the preview to update (and scroll to your editor position).

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Fri Nov 30, 2012 8:40 am

JoeB wrote: Ctrl+clicking this:

<span class="navy arrow arrow-navy">

Confuses the editor. It jumps to a random position. It should separate the different classes used (navy, arrow, arrow-navy), and underline/jump to the one clicked, not allow all of them to be clicked at the same time.
What version are you running? I'm pretty sure this bug has been fixed in 5.0.0.60

I have this HTML document:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
.navy {
	
}

.arrow {
	
}

.arrow-navy {
	
}	
	</style>
</head>

<body>
	<p class="navy arrow arrow-navy"></p>
</body>
</html>
When I click on navy in that class attribute value, TopStyle takes me to the .navy selector. When I click on arrow in that class attribute value, TopStyle takes me to the .arrow selector.

In other words: TopStyle 5 appears to be doing the right thing.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Fri Nov 30, 2012 8:46 am

JoeB wrote:Is there a way to set the program to always use IE8 as the previewer?
I'm not sure I understand the question. By default, TopStyle is running Chromium in the Output/Preview panel. When you open the Preview menu and change this to IE, then this setting should be persistent. In other words: when you re-launch TopStyle 5, it should now always run IE in the Output/Preview panel (until you change this setting again).

Betina
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 1
Joined: Sat Dec 01, 2012 4:04 pm

Re: Multiple problems when using html preview

Post by Betina » Sat Dec 01, 2012 4:11 pm

I've just purchased Topstyle 5, and so far I'm pretty happy with the new features.
But the standard Chrome preview doesn't reflect chances to the CSS file, like the IE preview does.
The abillity to preview in Chrome was the TOP reason I bought it.

I've also bought Stylizer 5 some time ago, because it could do that. But I don't like the interface.

So... Is it just me, or is the Chrome preview malfunctioning?

(I have a win7 64bit and newest Chrome - and IE9)

Sincerely
Betina Hvejsel

SteelToad
Rank I - Novice
Rank I - Novice
Posts: 18
Joined: Thu Nov 29, 2012 8:37 pm

Re: Multiple problems when using html preview

Post by SteelToad » Sun Dec 02, 2012 6:11 pm

I'm seeing the same thing TS5.0.0.80 Win7 64bit

Chrome was installed as my default browser before installing TS5

Using Chrome as the internal preview browser, changes to CSS are not reflected, using IE or another browser they are reflected.

If I open the modified page in an external browser, the changes are shown correctly.
If I disable and then re-enable the Output panel (w/ Chrome as the internal preview) it will show the changes, but subsequent changes arent shown.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Mon Dec 03, 2012 5:17 am

SteelToad wrote:Using Chrome as the internal preview browser, changes to CSS are not reflected, using IE or another browser they are reflected
Can you send me an export of your settings, please? Options > Export Settings

support AT topstyle4 DOT com

Thanks!

SteelToad
Rank I - Novice
Rank I - Novice
Posts: 18
Joined: Thu Nov 29, 2012 8:37 pm

Re: Multiple problems when using html preview

Post by SteelToad » Mon Dec 03, 2012 8:31 am

I'll send the settings, but I had just reset to the defaults prior to testing just to make sure it wasn't something I had changed

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Wed Dec 05, 2012 5:42 am

Betina wrote:the standard Chrome preview doesn't reflect chances to the CSS file, like the IE preview does.
SteelToad wrote:Using Chrome as the internal preview browser, changes to CSS are not reflected, using IE or another browser they are reflected.
TopStyle version 5.0.0.82 is supposed to fix this problem.

http://topstyle4.com#download

Can you please download version 5.0.0.82 and confirm the fix?

Thanks!

SteelToad
Rank I - Novice
Rank I - Novice
Posts: 18
Joined: Thu Nov 29, 2012 8:37 pm

Re: Multiple problems when using html preview

Post by SteelToad » Wed Dec 05, 2012 4:27 pm

Slightly better, but still glitchy: (5.0.0.83)

With TS5 set to chrome as internal preview, simple html file with table, simple css file to define cell padding, css and html files open:

on css tab change padding, save-all, switch to html tab = preview updated

on css tab change padding, switch to html tab = preview not updated

on css tab change padding, switch to html tab, save-all = preview not updated

on css tab change padding, switch to html tab, save-all, switch to css tab, switch to html tab = preview updated

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Tue Dec 11, 2012 3:35 am

SteelToad wrote:With TS5 set to chrome as internal preview, simple html file with table, simple css file to define cell padding, css and html files open
Out of curiosity, why aren't you running the HTML doc as a "Preview File" for the CSS doc? This prevents you from switching between the CSS tab and the HTML tab all the time.
SteelToad wrote:on css tab change padding, switch to html tab = preview not updated
This makes sense because the CSS doc on drive has not been saved (yet). The HTML doc is linked to the CSS doc on drive (not the CSS doc in memory).
SteelToad wrote:on css tab change padding, switch to html tab, save-all = preview not updated
Fixed in 5.0.0.84

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Multiple problems when using html preview

Post by TopStyle Support » Tue Dec 11, 2012 3:40 am

JoeB wrote:Why is the CSS selectors panel not showing the applied class when i select a element in the html file?
Because this isn't what the CSS Selectors Panel is for. The CSS Selectors Panel displays all selectors in the current style sheet. Clicking any selector in the list will highlight it in the editor so that you can edit the properties.
JoeB wrote:I would have thought this panel would jump to the correct CSS for the selected html element; instead i have to ctrl+click on the class.
This makes it hard to quickly see what CSS styles apply to an element.
Have you tried XRAY? (available on the Output/Preview Panel). When you click a HTML element in the Output/Preview panel, it will tell you what CSS styles apply to the element.

SteelToad
Rank I - Novice
Rank I - Novice
Posts: 18
Joined: Thu Nov 29, 2012 8:37 pm

Re: Multiple problems when using html preview

Post by SteelToad » Tue Dec 11, 2012 10:47 am

Thanks, Save/Tab Switch much better now :) thanks for explanation as well

This makes sense because the CSS doc on drive has not been saved (yet). The HTML doc is linked to the CSS doc on drive (not the CSS doc in memory).
This would be a really nice option to have (eventually). It would be especially useful when editing a live site, being able to play with different settings without the file having to be updated on the server for everyone else to see.

(note: Yeah, I realize what a large amount of work that would be :shock: )

SteelToad
Rank I - Novice
Rank I - Novice
Posts: 18
Joined: Thu Nov 29, 2012 8:37 pm

Re: Multiple problems when using html preview

Post by SteelToad » Tue Dec 11, 2012 11:09 am

Out of curiosity, why aren't you running the HTML doc as a "Preview File" for the CSS doc? This prevents you from switching between the CSS tab and the HTML tab all the time.
Because the css might affect multiple html files that I'm editing at the same time. It's easier to just tab switch to inspect how the css affects the different pages

Post Reply