Why can't I get this Onclick script to work?
» >
» Goto page Previous  1, 2, 3  Next
» View previous topic :: View next topic  
The page looks fine to me, though you may wish to add img { border: none; } to your CSS as IE defaults to drawing a blue border around images that are links.

The validator is complaining because it's picking up HTML content in the JavaScript block. You could move the JavaScript into its own .js file (probably the best option), HTML-escape it (too much work and a pain to maintain) or wrap it in a CDATA section.
despite the validation errors, it views fine in a browser. I figured out the formatting errors that mike was having with IE9, so I'm just gonna leave it as is.

where is the image with the blue border happening?
#clrhome_goback
{color:#e55b3c;

Using this on an <a> element with corresponding id changes the "a:active" color. I want to change all of them.

edit: never mind... i got it.
edit 2: sorry abt the double post. forgot i had already posted.
Why are you storing HTML in JavaScript anyway? That's not the way to do this. Instead, put your tab content in the HTML document and use JavaScript to simply toggle the visibility of them.
There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)
Kllrnohj wrote:
Why are you storing HTML in JavaScript anyway? That's not the way to do this. Instead, put your tab content in the HTML document and use JavaScript to simply toggle the visibility of them.


Bah. lol. I'm a novice here. I'll do the more advanced stuff when im comfortable with this.
--------------------------------

Edit: Maybe I will give this a whirl.

So, I'm thinking:

Method 1: instead of use ID, use both ID and class. Use JS and getElementById() to change the class names of the elements (options being current and other). Then use the getElementByClass() to toggle the visibility of the items (make all class "current" visible and class "other" hidden)
Method 2: use getElementById() still and directly toggle the visibility directly. I think that there is an attribute or some style value that does this, right?
If you want an idea on how to do it "right", look at the jQuery plugins that do this to get an idea of how they do it.

Or if you just want to make your page better and not muck with normal Javascript, just actually go use jQuery and the plugins that do this.
There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)
Ok, now why won't these images float center?


Code:

.icons{
float:center;
text-align:center;
font-size:80%;
}

...

<div class="icons" style="width:70px; height:70px;"><a href="/rules"><img src="images/tutorials.png" alt="rules" style="width:70px; height:70px; margin-right:10px;" title="rules" /></a>Rules</div>
<div class="icons" style="width:60px; height:60px;"><a href="/deckmaking"><img src="images/deckmaking.png" alt="deck making" style="width:60px; height:60px; float:center; margin-right:10px;" title="deck making" /></a>Deck-Making</div>
<div class="icons" style="width:60px; height:60px;"><a href="/strategy"><img src="images/strategy.png" alt="strategy" style="width:60px; height:60px; float:center; margin-right:10px;" title="strategy" /></a>Strategy</div>
<br />
<div class="icons" style="width:70px; height:70px;"><a href="/abilities"><img src="images/abilities.png" alt="abilities" style="width:70px; height:70px; float:center; margin-right:10px;" title="spells and abilities" /></a>Spells and Abilities</div>
<div class="icons" style="width:55px; height:55px;"><a href="/shrink"><img src="images/shrink.png" alt="shrink" style="width:55px; height:55px; float:center; margin-right:10px;" title="shrinking deck size" /></a>Shrinking Deck Size</div>
<div class="icons" style="width:80px; height:80px;"><a href="/links"><img src="images/links.png" alt="links" style="width:80px: height:80px; float:center; margin-right:10px;" title="links" /></a>Links</div>
Float: center; isn't possible, instead I recommend margin: auto;


There are two types of people in the world: those who can extrapolate data from incomplete data
I'm experimenting with jQuery a bit now. Can someone tell me why this doesn't work. The goal is to have the animation occur upon click of the element identified by id.


Code:
<script src="jquery.js"></script>
    <script>
                    $(#code_samples).click(function() {
                                            $(#code_samples).animate({
                                                                    height:'500px',
                                                                    width:'700px'
                                                                    });
                                            });
                    });
        </script>
My guess would be that you have one more )); than required. Does an error show up when you inspect the element under Chrome?


There are two types of people in the world: those who can extrapolate data from incomplete data
The one extra )} is an error. Fixed now and it still does not work.
ACagliano wrote:
The one extra )} is an error. Fixed now and it still does not work.
As I've said two or three times already, are you looking at the Javascript console? It will report typographical errors and most things like null references as well.
I couldnt find it Sad Just found it now. How do I use it?
As the script runs it will alert you to errors on the each applicable line. So, if any links trigger the script click them and watch for errors.


There are two types of people in the world: those who can extrapolate data from incomplete data

Code:
Uncaught SyntaxError: Unexpected token ILLEGAL /portfolio/:63


That is what it says.
ACagliano wrote:

Code:
Uncaught SyntaxError: Unexpected token ILLEGAL /portfolio/:63


That is what it says.


So look on line 63 and figure out where your illegal syntax is, probably involves the word "portfolio"

If I was a betting man it's because you forgot to put stuff in quotes when using jQuery's $() helper.
There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)
Kllrnohj wrote:
ACagliano wrote:

Code:
Uncaught SyntaxError: Unexpected token ILLEGAL /portfolio/:63


That is what it says.


So look on line 63 and figure out where your illegal syntax is, probably involves the word "portfolio"

If I was a betting man it's because you forgot to put stuff in quotes when using jQuery's $() helper.


On this note, learn to read compiler errors. Until then, any changes you make to try and fix errors will fall under the category of "Shotgun Debugging".
<- Please Support on Lego Ideas
Never mind on that. Figured it out. Another question.

I am having difficulty with getting a div to expand to fit the content of itself. The problem is that the code uses jQuery to animate its resizing. The code is in the code block below. Anyone any ideas about what I'm doing wrong?


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>ACagliano's Portfolio</title>
    <style type="text/css">
        #main_centerbox {
            position:absolute;
            width:250px;
            height:100px;
            top:200px;
            left:370px;
            border:5px solid black;
            background-color:white;
            padding:50px;
            z-index:3;
            text-align:center;
        }
        #main_codingsamples {
            position:absolute;
            background-color:red;
            top:0px;
            left:0px;
            width:50%;
            height:50%;
            border:2px solid black;
            z-index:2;
        }
        #main_graphicdesignsamples {
            position:absolute;
            background-color:blue;
            top:0px;
            left:50%;
            width:50%;
            height:50%;
            border:2px solid black;
            z-index:2;
        }
        #main_webdesignsamples {
            position:absolute;
            background-color:green;
            top:50%;
            left:0px;
            width:50%;
            height:50%;
            border:2px solid black;
            z-index:2;
        }
        #main_summary {
            position:absolute;
            background-color:yellow;
            top:50%;
            left:50%;
            width:50%;
            height:50%;
            border:2px solid black;
            z-index:2;
        }
        pre {
            position:relative;
            border:1px solid black;
            background-color:#c0c0c0;
            top:200px;
            left:50px;
            width:800px;
            height:300px;
            text-align:left;
            word-wrap: break-word;
            overflow:auto;
        }
        </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
                          $("#code_samples").click(function() {
                                            $("#main_centerbox").animate({
                                                left:'0px',
                                                top:'0px',
                                                height:'auto',
                                                width:'90%',
                                                overflow:'auto'
                                                        });
                                            $(".maintext").hide();
                                            $("#code_samplesdisplay").fadeIn("slow");
                                            });
                              });
       
        $(document).ready(function() {
                          $(".goback").click(function() {
                                             $("#main_centerbox").animate({
                                                top:'200px',
                                                left:'370px',
                                                width:'250px',
                                                height:'100px'
                                                        });
                                             $(".notmain").hide();
                                             $(".maintext").show();
                                             });
                          });
       
        $(document).ready(function(){
                          $("#graphics_samples").click(function() {
                                                   $("#main_centerbox").animate({
                                                                                left:'0px',
                                                                                top:'0px',
                                                                                height:'100%',
                                                                                width:'90%',
                                                                                overflow:'auto'
                                                                                });
                                                   $(".maintext").hide();
                                                   $("#graphics_samplesdisplay").fadeIn("slow");
                                                   });
                          });

        $(document).ready(function(){
                          $("#web_samples").click(function() {
                                                       $("#main_centerbox").animate({
                                                                                    left:'0px',
                                                                                    top:'0px',
                                                                                    height:'100%',
                                                                                    width:'100%',
                                                                                    overflow:'auto'
                                                                                    });
                                                       $(".maintext").hide();
                                                       $("#web_samplesdisplay").fadeIn("slow");
                                                       });
                          });

        $(document).ready(function(){
                          $("#summary_samples").click(function() {
                                                       $("#main_centerbox").animate({
                                                                                    left:'0px',
                                                                                    top:'0px',
                                                                                    height:'100%',
                                                                                    width:'100%',
                                                                                    overflow:'auto'
                                                                                    });
                                                       $(".maintext").hide();
                                                       $("#summary_display").fadeIn("slow");
                                                       });
                          });

                                                         
        </script>
       
       
   
   
    </head>
<body>
    <div id="main_centerbox">
        <span class="maintext" style="font-weight:bold; font-size:140%;">Web Design Portfolio</span>
        <br />
        <span class="maintext" style="font-size:110%;">of Anthony Cagliano</span>
       
        <div id="code_samplesdisplay" class="notmain" style="position:absolute; top:0px; left:0px; margin:50px; margin-top:10px; padding:50px; text-align:left; display:none;">
            <img class="goback" src="backarrow.gif" style="position:relative; top:0px; left:0px; width:60px; height:60px; cursor:hand; cursor:pointer;" />
            <h1 style="position:relative; left:10px;">Coding Samples</h1>
            <br />
            <h3 style="position:relative;">Author Page @ ClrHome</h3>
            <pre>code to put</pre>
            <span>The source code of the page at http://ac.clrhome.org</span>
            <br />
            <h3>Project Zelda</h3>
            <pre>code to put</pre>
            <span>The source of my currently incomplete Legend of Zelda game.</span>
            </div>
           
        <div id="graphics_samplesdisplay" class="notmain" style="position:absolute; top:0px; left:0px; margin:50px; margin-top:10px; padding:50px; display:none;">
            <img class="goback" src="backarrow.gif" style="position:absolute; top:0px; left:0px; width:60px; height:60px; cursor:hand; cursor:pointer;" />
            <h1 style="position:relative; left:10px;">Graphics Design Samples</h1>
            </div>
               
        <div id="web_samplesdisplay" class="notmain" style="position:absolute; top:0px; left:0px; margin:50px; margin-top:10px; padding:50px; display:none;">
            <img class="goback" src="backarrow.gif" style="position:absolute; top:0px; left:0px; width:60px; height:60px; cursor:hand; cursor:pointer;" />
            <h1 style="position:relative; left:10px;">Web Design Samples</h1>
            </div>
                   
        <div id="summary_display" class="notmain" style="position:absolute; top:0px; left:0px; margin:50px; margin-top:10px; padding:50px; display:none;">
            <img class="goback" src="backarrow.gif" style="position:absolute; top:0px; left:0px; width:60px; height:60px; cursor:hand; cursor:pointer;" />
            <h1 style="position:relative; left:10px;">Summary</h1>
            </div>

        </div>
   
    <div id="main_codingsamples">
        <img id="code_samples" src="folder.png" alt="folder" style="position:absolute; top:0px; left:30px; width:300px; height:280px; cursor:hand; cursor:pointer; z-index:0;" />
        <span style="position:absolute; display:block; top:140px; left:100px; font-size:120%; font-weight:bold; color:white; cursor:hand; cursor:pointer; z-index:1;">Coding Samples</span>
        </div>
   
    <div id="main_graphicdesignsamples">
        <img id="graphics_samples" src="folder.png" alt="folder" style="position:absolute; top:0px; left:200px; width:300px; height:280px; cursor:hand; cursor:pointer; z-index:0;" />
        <span style="position:absolute; top:140px; left:250px; font-size:120%; font-weight:bold; color:white; cursor:hand; cursor:pointer; z-index:1;">Graphics Design Samples</span>
        </div>
   
    <div id="main_webdesignsamples">
        <img id="web_samples" src="folder.png" alt="folder" style="position:absolute; top:0px; left:30px; width:300px; height:280px; cursor:hand; cursor:pointer; z-index:0;" />
        <span style="position:absolute; top:150px; left:100px; font-size:120%; font-weight:bold; color:white; cursor:hand; cursor:pointer; z-index:1;">Web Design Samples</span>
        </div>
   
    <div id="main_summary">
         <img id="summary_samples" src="folder.png" alt="folder" style="position:absolute; top:0px; left:200px; width:300px; height:280px; cursor:hand; cursor:pointer; z-index:0;" />
        <span style="position:absolute; top:150px; left:300px; font-size:120%; font-weight:bold; color:white; cursor:hand; cursor:pointer; z-index:1;">Summary</span>
        </div>
       

</body>
</html>
I got it to resize just fine with a copy paste. Note, though, files are case sensitive so make sure jquery.js doesn't need to be jQuery.js (as that's how it downloads from the jQuery website).

http://comicidiot.com/acag.html


There are two types of people in the world: those who can extrapolate data from incomplete data
It's on my directory as jquery.js, so it's right. Also, what browser did you test it on? Because I use Chrome and your link did the same bad formatting as mine.
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Why can't I get this Onclick script to work?
» Goto page Previous  1, 2, 3  Next
» View previous topic :: View next topic  
Page 2 of 3
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement