Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    May 2011
    Location
    Europe
    Posts
    9
    Member #
    27914
    Hello, people!

    I'm just starting with JavaScript and the only things I've done so far was animating sizes of divs and basic stuff like that. Then I started to make use if it by trying to do some stuff with it on my work-in-progress-site.

    The thing I'm trying to do now is to make some kind of a box with a heading inside which can be toggled to expand and show more text inside of it.

    The problem I have with achieving what I want, is that the box should have like a "pretty" border... So I made some images:
    4 corners, 2 horizontal borders, 2 vertical borders...

    I'm not sure that I'm approaching this correctly since my way seems too complicated to me for such a basic task.

    so I have those images which are stacked in divs, in some kind of tabular structure. With some text in another div in the middle of that "table".

    I won't explain my whole setup in depth right now cause I'd just like to know from you guys how to achieve my aim.

    some basic info about the script: it expands the parent div in height and length, expands vertical border divs in height, horizontal divs in length. The images inside those border divs are set to to y-repeat/x-repeat since those images are 1px wide/high. But so far this hasn't really worked much, because the border images don't repeat inside the expanded divs. I guess that if I animate a div in size the background-image isn't able to animate too. Well, I'm new to this as mentioned before

    So my question to you guys is, whether my way to do this is somewhat correct. And if it's totally wrong please tell me how to achieve this in another way. So don't be shy, and criticize

    I might also show you my code later, I simply don't have time right now to do this.
    really hope that my explanation of my work is possible to understand. I was in a hurry when I wrote this so I really didn't give enough information. I'll add more if needed.

    Thanks in advance for your answers and your support!
    I really wanna learn to use JavaScript , thought this projects of mine would be a nice and easy start but I kinda messed that up :S

    PS. Since English is not my native language I'd like to excuse myself for possible mistakes. Hope its readable :-P

    :::::EDIT:::::
    Here is a link to the site I'm using to test the code. Click on the box to enlarge it and see what happens to that box when expanded. The code is really messy cause I've been changing a lot to try to solve my issue and that left some strange formatting there. Sorry :-(
    Hope you still get the general idea of it when looking at the source...

    Link: http://www.sovietcode.kodingen.com

    Slad

  2.  

  3. #2
    Junior Member
    Join Date
    May 2011
    Location
    Europe
    Posts
    9
    Member #
    27914
    I'm getting a little disappointed about the fact that no one has replied to this thread yet...
    I'm not trying to get offensive or desperate or something, just want to know the reason why.

    So please if you read this thread and dont't feel like answering, could you still try to force your self to give me the reason for that in one sentence or two
    This sounds kinda stupid, but I'd just like to know whether I'm asking for something too difficult to answer or if it's just impossible to understand my whole question at all - cause I can really imagine that as the reason

    Thank you

  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Hi - I'm sorry you're disappointed, but I think part of the reason for no answers is that seeing your code is probably necessary to fix it.

    I wish i could help, but all I can say is - have some patience - not every forum gets read every day, sometimes answers takes a week or more. Also, this may just be something that no-one here has an answer to.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Ok, I *think* I understand what you're trying to do. Here's how I would go about it:

    Drop the images for the borders. That's your main problem. Instead, use a div nested within another, with the borders and border radii set in CSS. It would look like this:

    HTML Code:
    <div class="outer">
        <div class="inner">Some Text</div>
    </div>
    Code:
    .outer{
    height:some number;
    width:some number;
    border:5px solid purple;
    border-radius:5px;
    }
    .inner{
    height:some number;
    width:some number;
    border:2px solid lightpurple;
    border-radius:5px;
    }
    From there, either use CSS transitions in conjunction with the :hover and/or :active pseudo classes or some JavaScript to animate the size change. I could do it with CSS, but I don't have the time to come up with the code right now. But, that should at least get you on the path. Biggest takeaway: lose the images.
    Slad likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    May 2011
    Location
    Europe
    Posts
    9
    Member #
    27914
    Yay, answers!

    @Ronald Roe
    First, thank you for the answer and the effort
    About the method you are proposing: when I was starting with that "project" of mine I also thought about the border-radius property, But didn't even try to implement it because it's a CSS3 thing and I thought that some properties like this one might not be supported by some browsers (correct me if I'm wrong!)
    That's the reason why I went with images...

    But since I can't get it to work with those images and you also say that I should lose them, I guess I will do so and make a CSS version. I also think (hope) that I'll be able to do a javascript transition then. Once done, I'll post it here for you to see it.
    If you ever have the time to write such a transition in CSS, I'd really appreciate it but I'm not pushing you to do one, mate

    Thanks again for your post!

    @AlphaMare
    First of all you don't have to be sorry at all since it's neither your nor anyone else's fault. Except for mine for not explaining my problem and/or method properly.
    Hmm, I actually did provide the source by giving the link to the site (http://www.sovietcode.kodingen.com)
    I thought that would be enough...
    Yea, and I can understand that there is the possibility that no one has the answer to my questions, but as mentioned in the first post I was thinking that the thing I was trying to do was kinda *basic* and *simple* to do for experienced people. And from reading other threads on the forums I see that there are such people
    What i mean is, that I thought that my question was a "noob"-question, believing that there would be many people who can answer it. I guess I was mistaken and so I realize it now.

    Again, thanks, both of you, for your answers!

    And sorry for strange English :S

  7. #6
    Junior Member
    Join Date
    May 2011
    Location
    Europe
    Posts
    9
    Member #
    27914
    Oh, sorry, this is a little offtopic but I'll be quick about it:
    Another question. It's about external javascript files.
    So thejavasript for the box was stored in an external .js file. But it didn't work from there, so I have put it into the <head>. Then it worked.

    I believe that it didn't work cause I didn't link it properly in the html file. Maybe didn't specify it as jQuery or something...

    Here is the head of the html:
    HTML Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link rel="javascript" type="text/javascript" href="mindbox2.js" src="jquery.js"/>
    /*added the src="jquery.js" later when i saw that it didn't work, tried some stupid things like that*/
    <script type="text/javascript" src="jquery.js"></script>
    
    </head>
    Will be glad if you can tell me where my mistake is. Thank you.

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You're welcome.

    Border-radius works in the latest version of all browsers. It doesn't work in IE 8 and below. However, there are ways around that. Besides, it would really only look bad if your design relies on rounded borders to work. For most designs, the user wouldn't know the difference if they weren't seeing rounded borders where they never saw them to begin with. If you don't know it's supposed to be there, how can you know it's missing? Anyway, that's my take. You'll find a million other opinions on it around here.

    You'll link the JS like so: <script type="text/javascript" src="mindbox2.js"></script>
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Slad, post: 219466
    Yay, answers!

    Hmm, I actually did provide the source by giving the link to the site (http://www.sovietcode.kodingen.com)
    I thought that would be enough...
    I saw the link but I also saw that you said that the code was messed up and with strange formatting - so i thought maybe it would be better if you posted the original code - I didn't explain that clearly.

    Anyway, listen to Ronald - he knows lot about this and explains it more clearly than I ever could.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Ronald Roe, post: 219469
    For most designs, the user wouldn't know the difference if they weren't seeing rounded borders where they never saw them to begin with. If you don't know it's supposed to be there, how can you know it's missing?
    YAY! I'm glad to know someone else think this way - I thought I was in a minority.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by AlphaMare, post: 219473
    YAY! I'm glad to know someone else think this way - I thought I was in a minority.
    Took me a long time to get there. I usually throw in CCS3 PIE just because it's easy to do, but its flaky anyway.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com