SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    very new and need some help

    ok, I need a fair bit of help... I'm in a web design class at the moment and I've no idea how to get my page to work the way I want it to exactly (since it's design and not java script the teacher isn't very helpful in the area)

    What I have
    I have two floating text boxes one for the left and one for the right, I have them so they sit under the header and on either side of the center image.
    they are also set to scroll if the text goes farther then 600px

    What I want to do is make it so that they can be hidden into a very small area
    googled a bit and found this code
    <script language="javascript">
    function toggle(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "show";
    }
    else {
    ele.style.display = "block";
    text.innerHTML =

    I just don't know where my code would fit into it
    my code is in a css style sheet and for this particular part looks like this

    #left { float:left;
    width:480px;
    height:600px;
    overflow:auto;
    }
    #right { float:right;
    width:480px;
    height:600px;
    overflow:auto;

    }

    I'd also like to make it so that the floating boxes while staying below my header will float down if the page is long enough to scroll down lower then the header

    the final thing I need help with is how to keep my bottom home button glued to the center of the bottom of the page always under everything in the page no matter how long it goes

    I found out that it won't do this because before I had the side boxes confined to the same size area as the picture the longer of the two pushed over the bottom button so that it was no longer perfectly in the center

    help with any and all of this would be just great

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey mate,

    As for the your problem with affixing a button to the bottom, centre of the page, you should use the following css on it -

    button {
    position: fixed;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    }

    - if you want it to be permanently at the bottom of the page, even if the user scrolls, or -

    button {
    position: absolute;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;

    }

    if you want it to be at the bottom of the immediately visible page, but still move with the rest of the content if the user scrolls.

    I have no idea how the javascript you've copied here applies to your other problem, but could you explain in more detail what you mean by wanting to fit the boxes 'in very small spaces'. Do you want the boxes themselves to reduce in size? Or the content inside them? And what event sould trigger that?
    Jesse

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you,
    would that go into the style sheet or the source code? and how would I make it only apply to the one button because I have others I want to keep at the top of the page?

    ok, I've no idea where I'd begin with the other thing but maybe if I do it this way which just popped into my head it might be easier to do and say...
    ok, say I've got a 20x20 pixel image just a small little thing
    and I've got this in my style sheet
    #left { float:left;
    width:480px;
    height:600px;
    overflow:auto;
    }
    #right { float:right;
    width:480px;
    height:600px;
    overflow:auto;

    }
    that creates 2 div boxes ( div id left and div id right, on either side of the page that I can place type in and it'll be stuck on those sides)
    What I want to do is to take those div's and make the little 20x20 image into a button that when it's clicked the words in those div boxes will show or disappear if clicked a second time
    how would I do that either in the Source code or preferably in the style sheet so that I don't have to go through all my pages and do it.

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I just gave you was css, so that goes in the style sheet.

    If you want any element (a button, in this case) to have a specific css style rule that won't be applied to other elements of the same type, the best way would be to give it a unique id. You are already using ids for your divs, by the looks of it - it is no different for a button. Just specify the id in the tags like so:

    <input type="button" id="myButton" etc...


    Then refer to it in the css using a hash tag:

    #myButton {
    <insert css rules here>
    }

    Any style rules you put in those brackets will only be applied to the element that has the specified id.

    Regarding your other problem, the most obvious way to make the text disappear/reappear in the div boxes would involve javascript. All the code that follows should be put within <script> tags.

    First, create two variables that will contain the text you want to appear in the divs. These variables are called STRINGS and the values assigned to them must be within quotation marks.

    var leftBoxText = "blah blah blah..."
    var rightBoxText = "blah, blah, blah..."

    Then create two more variables, called BOOLEANs. A boolean is a variable that can only have two values - true or false.

    var leftTextDisplayed = true;
    var rightTextDisplayed = true;

    If the page is initially loaded with text in the boxes, or

    var leftTextDisplayed = false;
    var rightTextDisplayed = false;

    if it isn't.

    Note that in this case the words false or true should NOT be enclosed in quotation marks.

    Next you want to put the div boxes themselves into javascript variables. If I am to take the names you are using below literally that would be:

    var leftBox = document.getElementById("left");
    var rightBox = document.getElementById("right");

    Use that exact syntax and do not insert spaces between the words!

    Now you'll need a function to control each box. I'll only write the one that will refer to the left, and I'm sure you can make the necessary adjustments for the right one.

    function () leftTextControl {

    Here we use an 'if' statement to see if the text should be appearing or hiding - we use the boolean variables we created earlier to tell. If the boolean is set to 'true' the code in the 'if' portion of the statement will execute, otherwise the code in the 'else' portion will.
    if(leftTextDisplayed) {

    innerHTML is a javascript expression that allows you to write text or code directly into the html element that is specified in the variable. Here we are telling the browser that there should be no content in the specified variable. After doing this we change the value of the boolean to false, as there will now be no text displaying.

    leftBox.innerHTML = "";
    leftTextDisplayed = false;
    } else {

    Here we are instructing the browser to fill the 'leftBox' element with the text we specified in the 'leftBoxText' string variable. After this we again change the value of the boolean.

    leftBox.innerHTML = leftBoxText;
    leftTextDisplayed = true;
    }
    }


    Here's that code again without the comments in between:

    function () leftTextControl {
    if(leftTextDisplayed) {
    leftBox.innerHTML = "";
    leftTextDisplayed = false;
    } else {
    leftBox.innerHTML = leftBoxText;
    leftTextDisplayed = true;
    }
    }

    Finally you will need a reference to that function in the button you want to use to make the text appear/disappear. You do that through a property yo ucan assign to any html element (not just buttons) called 'onclick'. So in the html that would be:

    <input type="button" onclick="javascript:leftTextControl()" etc...

    Then add any other properties you want. When the user clicks this button, if you've done everything correctly, the text should appear or disappear.

    Note that javascript, unlike html, is case sensitive. The placement of capitals is important!

    Well, hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, I'll go and put that into my code right away

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I kept trying that this weekend but I fail at knowing where to put anything...
    see problem is I'm an artistic brained person trying to learn how to do these things that just kinda go over my head ^^;
    so maybe if you could tell me a bit more where that'd go... I'd didn't think that I'd need to post my whole basic code here but apparently I just can't get it without knowing where each thing would go into my code ^^;

    So here goes, this is my basic source code

    HTML Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Femerithian Site</title>
    <link href="body1.css" rel="stylesheet" type="text/css" /><style type="text/css">
    }
    </style></head>
    <body>
    <center>
    <div id="wrap"></div> 
    <a href="Art.html"><img src="art button.png" width="100" height="100" alt="Art" longdesc="art button.png"></a>
    <a href="Photos.html"><img src="photo button.png" width="100" height="100" alt="Photo" longdesc="photo button.png"></a> 
    <a href="Craft.html"><img src="craft button.png" width="100" height="100" alt="Craft" longdesc="craft button.png"></a>
    <a href="Design.html"><img src="design button.png" width="100" height="100" alt="Design" longdesc="design button.png"></a>
    <a href="About.html"><img src="about button.png" width="100" height="100" alt="About" longdesc="about button.png"></a>
    <a href="Contact.html"><img src="contact button.png" width="100" height="100" alt="Contact" longdesc="contact button.png"></a>
    <br />
    <div id="left">Info</div>
    <div id="right">Infor</div>
    <img src="X.jpg" width="1001" height="801" alt="X" longdesc="X.jpg" />
    
    <br />
    <a href="Femerithian Home.html"><img src="home button.png" width="300" height="75" alt="Home" longdesc="home button.png"></a>
    </center>
    </body>
    </html>
    And then this is the style sheet I've got applied

    Code CSS:
    @charset "utf-8";
    body {
    	font-family:AdineKirnberg-Script, Lucida Sans Unicode, Lucida Grande, sans-serif;
    	font-size: 30px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #FFF;
    	text-decoration: none;
    	background-color: #000;
    	background-image: url(background1.png);
    	background-repeat:none;
    }
    #wrap {margin: 0px auto 0px auto; /* top, right, bottom, left */
    	height:282px;
    	width:996px;
    	background-repeat:none;
    	background-image: url(head1.png);
     
    }
    #left { float:left;
    		width:300px;
    		height:400px;
    		overflow:auto;
    }
    #right { float:right;
    		width:300px;
    		height:400px;
    		overflow:auto;
     
    }
     
    #button {
    position: fixed;
    bottom: 0px; 
    }

    Now then where in this code would all that code fit?
    everything I could think of failed when I tested it >.>;
    Last edited by Mittineague; Jul 25, 2011 at 16:40. Reason: reformatting bbcode tags

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps I was assuming too much by giving you Javascript - it sounds like its outside the scope of the class you're doing anyway. But it's the only way to make what you're trying to do happen.

    Like CSS, Javascript is a completely separate language that must be separated from your HTML by either putting it in special tags:

    <script>

    (insert javascript here)

    </script>

    Or referring to an external file, like so:

    <script type="text/javascript" src="myJavascript.js"></script>

    If you chose to put it in an external file, it must have the extension *.js

    Also, the 'X' button below (which I can now see is actually an image) is not wrapped in an anchor tag, so it will not respond to mouse clicks. If you want an image to respond to mouse clicks, you must put it between anchor tags, and refer to the javascript function in the href property as you usually would a html document, like so:

    <a href="javascript:functionName()"><img src="X.jpg" alt="X" /></a>

    It might be helpful if you stopped referring to HTML and CSS as 'code' in your future posts. Most developers only use 'code' to refer to event-based programming languages, like Javascript or PHP. HTML controls content, while CSS controls presentation, so neither of them are 'code' as such.

  8. #8
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I definitely see where I was going wrong now so I'll work on wrapping my brain around that... I didn't even consider java script to be like the css. If I can treat it similar to the css I should be able to map it out in my head as to how the things link together.
    The 'x' is just an image in that code
    the "femerithian home" is my button that I wanted to stay in a fixed place

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    then again ^^;
    I think I still may need some help with more explaining 'cause now I've got those and this which is the only part of what you told me that dreamweaver didn't say was wrong in the fresh javascript file I made... I'm gonna title it "script"

    var leftBoxText = "blah blah blah..."

    var rightBoxText = "blah, blah, blah..."

    var leftTextDisplayed = true;

    var rightTextDisplayed = true;

    var leftTextDisplayed = false;

    var rightTextDisplayed = false;

    leftBox.innerHTML = "";

    leftTextDisplayed = false;

    leftBox.innerHTML = leftBoxText;

    leftTextDisplayed = true;

    rightBox.innerHTML = "";

    rightTextDisplayed = false;

    rightBox.innerHTML = leftBoxText;

    rightTextDisplayed = true;

    I'm gonna keep re-reading what you said before and see if I can get anything to click ^^;


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •