link problem

[cajchris]

hi,

i have an ahref link within my page which when clicked will call a javascript function to switch css files. this works fine however i want the new page to appear in a new window. i have tried using the target="_blank" attribute but it doesnt seem to do anything.

I would even settle for being able to use the back button on the browser to return to the page with the CSS before it was switched. here is my javascript function:

// activeCSS: Set the active stylesheet
function activeCSS(title) {
var i, oneLink;
for (i = 0; (oneLink = document.getElementsByTagName("link")); i++) {
if (oneLink.getAttribute("title") && findWord("stylesheet", oneLink.getAttribute("rel"))) {
oneLink.disabled = true;
if (oneLink.getAttribute("title") == title) {
oneLink.disabled = false;
}
}
}
}

// findWord: Used to find a full word (needle) in a string (haystack)
function findWord(needle, haystack) {
return haystack.match(needle + "\\b");
}

and here is my html:

<a href="/infoglueDeliverWorking/about" class="PrintIconLink" onclick="activeCSS('print');
return false;">

the url is the same as the url you are at before the link was clicked so essentially just ahref="".

regards,
cajchris

 

[BillyRayPreachersSon]

If this is simply to get a print style sheet for the page, why use JavaScript at all? Why not just specify one style sheet for screen, and one for print?

If that sounds good to you, check over in the HTML/CSS forum (forum215) for more details - there are many posts detailing how to do this, and possibly an FAQ or two, too.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

thanks, but i dont want the page to actually be printed when the click is activated. isnt this what that does.

i want to just view the page with images and stuff removed.

regards
cajchris

 

[BillyRayPreachersSon]

Sorry - I assumed that a link with a class of "PrintIconLink" which activates a style sheet called "Print" was something to do with printing. My bad!

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

no problem dan, any ideas then? coz at the moment it does switch style sheets ok, but unfortunately the back button on the browser doesnt activate as it is obviously still at the same url.

regards
cajchris

 

[BillyRayPreachersSon]

Remove the "return false;" from your onlick.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

now whats happening is when you click the link, it quickly appears as it should, then resorts back to the original page.

regards,
cajchris

 

[BabyJeffy]

Of course. Because the page is reloading the URL in the href. I think you need to rethink howyou are doing this. Why not explain the problem (rather than explain how you want to solve the problem). We may be able to provide a better solution that your current one.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[cajchris]

ok,

I have a web page with a print this page link on it. At the top of the page i have specified 1 style sheet as a default, and another as an alternative one (the print one). when the user clicks the link a call is made to the javascript which will switch the active style sheet.

I am wanting the same page with new styles enforced to appear in another window ideally.

regards,
cajchris

 

[BabyJeffy]

Why bother with all this stylesheet switching? There is honestly no need! You can set the media parameter on a stylesheet to be "print" and when the page is printed, the print stylesheet will be used. Seriously... this is better than using javascript (because it will work for non-javascript users just as well).

You can still include a link to "Print this page" but all this would do is trigger window.print() and print the current page. No worries about popup blokers either!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BillyRayPreachersSon]

OK - If you want users without JS to be able to switch style sheets, you're going to have to do a form submission, and use server-side technology to deliver a different CSS markup/includes to the page.

If you're not worried about non-JS users, then you could do a standard window.open, save the handle returned, and then use that as a base for your CSS switcher function (instead of "document", you'd use the handle variable instead).

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

cheers, but im a bit of a newbie at this. do you have any examples or know of any for the non-js approach?

regards
cajchris

 

[BillyRayPreachersSon]

As I said - for the non client-side JS approach, you will need to use server-side technology to determine what CSS to deliver to the page based upon the form values submitted.

Does your host support any server-side scripting? If so, do you know what?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

sorry i didnt make that clear. i meant the approach where im not bothered about non-js users. my bad!!

 

[manarth]

<head>
  <link rel="stylesheet" type="text/css" href="normal.css" />
  <link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>

  [COLOR=green]/* print.css - print styles */[/color]
  img {display: none;}
  .foo {display: none;}
  [COLOR=green]/* etc */[/color]

You can see the effect here:

http://www.zioncore.com/

Try 'print preview' and you'll see a number of design elements (such as the navigation) are removed.

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[cajchris]

i am not wanting the activation of the link to print the page. i am wanting to give a view to the user of the page that could be printed. thats why i dont think i should be using the media="print" thing.

regards,
cajchris

 

[manarth]

The media="print" attribute doesn't automatically print the page. It specifies a stylesheet to apply to the page if/when it is printed.

It's "invisible design", meaning users don't have to look for a 'print this page' or 'print view' button, the print style can be inbuilt invisibly into every page without any user intervention, and without altering the appearance onscreen.

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[cajchris]

thats good to know, cheers manarth but what if this is a client requirement that they have a print this page link which shows the page as it will be printed.

regards,
cajchris

 

[BabyJeffy]

i am wanting to give a view to the user of the page that could be printed.

OK. Fair comment. Personally I would not create such a view for the user (because they can use the built-in print preview if they want to see what it's like before printing)... but I can understand why using media="print" is not the solution you want.

So... you could code the page to check if a GET parameter has been passed into the page. If so... then output the print css instead of the normal css. Thsi would require some kind of server-side solution. Are you using php, asp etc?

Here is what I mean (using php - untested):

<html>
<head>
<? if ($isset($_GET['print'])) { ?>
<link rel="stylesheet" type="text/css" href="print.css" />
<? } else { ?>
<link rel="stylesheet" type="text/css" href="normal.css" />
<? } ?>
</head>
...
<body>
...
<a href="?print=1" target="_blank">Print Preview this page</a>
...
</body>
</html>

If the user clicks the link, then the page is reloaded with ?print=1 added to the end of the URL. This is then picked up server-side and different stylesheet is used.

No javascript required. This does require some server-side code... what do you have available?

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[cajchris]

i am developing this site using infoglue which uses velocity templates for accessing java objects, in order to make http requests and the like.

regards,
cajchris