34 users online (1 members and 33 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 30

Related

  1. Scroll bar for part of page    Forum: HTML Forum
    Replies: 1
  2. Replies: 1
  3. Table Woes part 2    Forum: HTML Forum
    Replies: 9
  1. #1
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    How to override CSS styling in one part of webpage

    CODE IN JSP THAT DYNAMICALLY PRINTS SEARCH RESULTS THAT I WOULD LIKE TO HAVE A DIFFERENT FORMAT:

    Code:
    						
    <hx:outputLinkEx styleClass="outputLinkEx" id="formPdfLink"
    	onclick="return openPDFWord(this, '#{varsearchResults.targetURLForPDF}');"
    	value="#{varsearchResults.pdfURL}">
    	<h:outputText styleClass="outputText" id="text7"
    	value="#{varsearchResults.formIdAndEditionDate}"
    	escape="false"></h:outputText>
    </hx:outputLinkEx>
    CODE IN CSS THAT DEFINES LINKS:

    Code:
    a:link {color:#52658C;}
    a:visited {color:#52658C;}
    a:hover {color:#CC0000;}
    a:active {color:#52658C;}
    I would like to have the links printed from the code above to show when they have been visited. The PDF's open in a new window, does this mean the code would have to be executed on an onclick?

    Stuck, I tried messing with the code:
    <hutputText style="color:red;"
    this makes just those links red. I tried vlink=#CC0000 which didn't work

    Any help would be greatly appreciated.. I tried 3 forums to no avail

    Regards,
    Will

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: How to override CSS styling in one part of webpage

    If you are wanting the link to be a different color when it has been visited, all you need to do is change the a:visited in your CSS to be a different color than a:link.

  3. #3
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    I want just those links printed by that block of code to show visited. The vlink is set to the same color because i dont want any of the other links to show that they are visited.

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: How to override CSS styling in one part of webpage

    Sorry about that. I didn't catch that you wanted the links to be different across the page. The same principle applies though. As long as the code was set up correctly, you will style the outputLinkEx class.

    For example, make the following changes to your CSS file:
    Code:
    a:link {color:#52658C;}
    a:visited {color:#52658C;}
    a:hover {color:#CC0000;}
    a:active {color:#52658C;}
    
    a.outputLinkEx:link {color:#52658C;}
    a.outputLinkEx:visited {color:#FF0000;}
    a.outputLinkEx:hover {color:#CC0000;}
    a.outputLinkEx:active {color:#52658C;}
    The visited PDF links should be red while the rest remain as before.

    For reference, check here.

  5. #5
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    No dice. Still not showing visited links. I was thinking about trying to span.. but that was unsuccessful too. I'm assuming because outputText uses span, I don't think you can span a span?

  6. #6
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    from my understanding of the code. outputLinkEx allows the js to get the search result values and outputText prints the actual link...

    when I threw in style="color:red;" next to outputText all the links turned red

    i tried style = "vlink:red" but wasn't lucky enough for that to work.

  7. #7
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: How to override CSS styling in one part of webpage

    In the code I gave you, try changing outputLinkEx to outputText.

  8. #8
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    Still not working. I feel like it has a lot to do with the PDFs opening in a new window.

  9. #9
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    i also tried:

    .outputText a:link...

    and

    #outputText a:link...

    and

    .outputLinkEx a:link...

    and

    #outputText a:link...

    none of which worked

  10. #10
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: How to override CSS styling in one part of webpage

    If you remove all CSS formatting of the a element, does the link show as a different color after you click on it?

    Also, what browser are you viewing it in?
    Last edited by jthayne; 06-23-2009 at 09:20 AM. Reason: additional question added

  11. #11
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    when i remove:

    Code:
    a:link {color:#52658C;}
    a:visited {color:#52658C;}
    a:hover {color:#CC0000;}
    a:active {color:#52658C;}
    from the style sheet they do not change when clicked but the link printed by the code below does (which opens an outlook window).

    Code:
    		
    <h:outputLink id="feedbackLink" value="mailto:PRODCATAPP?subject=Product Catalog Feedback" tabindex="-1">
    <h:outputText id="feedbackText" value="#templateMsgs.feedback}"/>
    </h:outputLink>
    since we need the <hx outputLinkEx to allow script.. this means I would have to use an onclick method correct? Since it's already set to openPDF() on onclick would we have to split it into mousedown mouseup(not a good algorithm)?

    I got this html example to work before I saw the actual jsp/css code, is this applicable?

    Code:
    <html>
    <head>
    <title>Potential Solution to Linked List Issue!</title>
    <style type="text/css">
    
    //link style before click, shows when loaded
    a.beforeclick:link		{color:#0000FF;font-size: 12pt;text-decoration:underline;font-weight:normal}
    a.beforeclick:active	{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
    a.beforeclick:visited	{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
    a.beforeclick:hover		{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal}
    
    
    //link style after click (switch by onclick becoming true) 
    a.afterclick:link		{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal} 
    a.afterclick:active	{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal} 
    a.afterclick:visited{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal} 
    a.afterclick:hover	{color:#FF0000;font-size: 12pt;text-decoration:underline;font-weight:normal} 
    </style>
    //these classes when coded will show red when hovered over, visited or active
    //red will allow customers to skip or go back to previously viewed items more easily
    //Start Javascript popup 
    <script type="text/javascript">
    function launchPDF(PDFID){
    	alert("Would launch PDF # " + PDFID + " here");
    }
    //end script
    //start html body
    //here we set our link to launch the javascript box when
    //clicked then change the link to a afterclick when onclick is true
    </script>
    </head>
    <body>
    <p><a href="javascript:launchPDF(12345)" onclick="this.className='afterclick';" class="beforeclick">Launch PDF 12345</a></p>
    <p><a href="javascript:launchPDF(34567)" onclick="this.className='afterclick';" class="beforeclick">Launch PDF 34567</a></p>
    <p><a href="javascript:launchPDF(56789)" onclick="this.className='afterclick';" class="beforeclick">Launch PDF 56789</a></p>
    <p><a href="javascript:launchPDF(99999)" onclick="this.className='afterclick';" class="beforeclick">Launch PDF 99999</a></p>	
    </body>
    </html>
    IE Version: 6.0.2900.2180.xpsp_sp2_qfe.090206-1239
    ^not by choice

  12. #12
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    if i change the active color value to red it will stay red while the pdf is active like planned. Is there anyway to make that final as part of the openPDF js?

  13. #13
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: How to override CSS styling in one part of webpage

    The visited is the only one you want to be changing.

    I feel like I am missing something, but I am not sure exactly what it is.

    If you just change the value for visited and leave the rest the same, does the color of the link change?

  14. #14
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    When i replace what's there with a:visited{color:#00CC00} there is no color change the search result links when clicked on. It does, however change if I do a:link{color:#00CC00} (active and hover work as well)

    I think since it opens in a new window it doesnt register in the history because the page has already been rendered?

    I found something on using a js function to change the color of the link, I'm going to look into it a little more though. Have you heard of doing that?

  15. #15
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: How to override CSS styling in one part of webpage

    Code:
    <script type="text/javascript"> 
    <!-- 
    window.onload=function(){ 
    document.getElementById('text7').onclick=function(){ 
    this.style.color= '#CC0000'; 
    return false; 
    } 
    } 
    //--> 
    </script>
    I put the above code between my <head> tags..

    From what I understand about javascript this function opens as the page does and acts as a listener. When a link with the id 'text7' gets clicked it takes this(that link) and changes the color to red.

    sounds great right? unfortunately it does not work :/



Page 1 of 2 1 2 Last

Tags for this Thread