Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post

    Smile clickable image of a heart that opens another layer on top of the main page. can you

    i want to a clickable image of a heart that opens another layer on top of the main page. can you link to a guide on this please?

  • #2
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post

    Smile

    for tumblr

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    Help me PLEASE

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    No idea what Tumblr has to do with this, but...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>overlay demo</title>
    <style type="text/css">
    div#overlay {
        position: absolute;
        top: 150px; left: 150px;
        height: 200px; width: 200px;
        border: solid red 4px;
        background-color: pink;
        color: red;
        font-size: x-large;
        padding: 20px;
        display: none;
    }
    </style>
    </head>
    <body>
    <div id="overlay">
        Thump-thump.<br/>
        Thump-thump.<br/>
        Thump-thump.<br/>
    </div>
    
    <img src="http://bestclipartblog.com/clipart-pics/heart-clipart-1.png" alt="heart"
         style="margin-top: 200px; margin-left: 200px; height: 100px;"
         id="theHeart" />
    
    <script type="text/javascript">
    var divover = document.getElementById("overlay");
    
    divover.onclick = function( ) { this.style.display = "none"; }
    
    document.getElementById("theHeart").onclick = 
        function() { divover.style.display = "block"; }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post

    Smile

    because it's on tumblr, though i really need a good guide or something to learn,

    i dont want copy/paste i dont learn anything ='(

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    What I meant was: I don't know how/why it being on tumblr would be different than any other web page.

    I showed you the basics: The overlay <div> can be styled anyway you want it in the <style> section. And then you just need to use an onclick of the image to trigger the display.

    Play with what I gave you. Use your own heart image. Use your own styles for the overlay div. Try it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    OKAY!! so the heart is a bad spot... then i moved the code to under <header>, then it showed up at the middle of the header, then i did some more edits to place it at the top left corner and made it a little heart, and now it's disappear completely... (i didn't make it that little) and the code is still inside :/ im SO confused...

    i need a guide... or resources...
    Last edited by css4kitten; 06-03-2013 at 11:47 PM.

  • #8
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    "why it being on tumblr would be different than any other web page." -- tumblr has variables and other things that maybe affect (im not sure). i read their entire docs already. i feel like i understood 70-80% though they don't cover javascript. and i don't know javascript yet.
    Last edited by css4kitten; 06-03-2013 at 11:56 PM.

  • #9
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post

    Smile

    ok now i got it to display. but i don't know why it's in the middle. i tried some things like top-left, and it didn't work. i also don't understand why there's so much space between the heart and the title. and i dont know if the <div id="overlay"> and img are suppose to be after one another. or if i can put them anywhere in the header, or what order these two lines should be
    Last edited by css4kitten; 06-04-2013 at 03:35 AM.

  • #10
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    and i also can't turn it off... it stays there forever... and isn't there a way for the popup/layer to take up the full space of the entire header without having to set each margin and stuff?

    please send me guides and other gifts =)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Show us a live URL to look at. Can't possibly guess what you are doing from your descriptions.

    Or post the source code for your page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post

    Smile

    remove the // and [[

    isn//this//beautiful. [[tumblr.]] //com//

    the heart is currently hidden under the navbar, i have no idea what's going on but im suppose to be making the best web design guide for everyone.................................. yea.........................

    i did do http://www.codingforums.com/html-css/295854-can-someone-link-good-guide-how-make-fixed-navigation-bar-tumblr-ple.html#post1339174 but there's a lot of other ways to do a navbar or style it

    and i honestly dont think any of the resources are good at explaining (many don't have pictures), and videos on youtube are either 1) basic ones lacking in connections between concepts or 2) highly advance google developer stuff that NOBODY would understand (and even if they do, they arent teaching you anything you actually need) -- because i am objectively a genius =) -- and if they were good, everyone would understand everything
    Last edited by css4kitten; 06-04-2013 at 03:33 AM.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    ??? I took your source code and just UN-commented the stuff you had commented out and it worked. The heart shows up just fine.

    But that's in Chrome.

    You HTML is *SO* illegal, so many many errors, that it's amazing that even Chrome can render it correctly.

    You have code like this:
    Code:
    </head>
    
    <div id="totop"></div>
    ... dozens of lines ...
    </header>
    
    <body class="index">
    Totally bogus. The <body> tag should be *DIRECTLY* after the </head> tag.

    You also goofed on where you put the <div id="overlay"> that I showed you.

    Again, it happens to work in Chrome, but it really should be *directly* after the <body> tag, because it wants to be positioned completely independently of any of the other stuff on the page.

    ANYWAY...possibly the only thing you need to do to get the heart to show in whatever browser you are using is to give it a higher z-index. That is, something like
    Code:
    <img src="http://bestclipartblog.com/clipart-pics/heart-clipart-1.png" alt="heart"
         style="margin-top: 1px; margin-left: 0px; height: 20px; z-index: 10;"
         id="theHeart" />
    [/code]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Here, look at what the w3c validator has to say about that mess:
    http://validator.w3.org/check?uri=ht...Inline&group=0

    39 errors! And then it just gave up because of your bogus <body> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    May 2013
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    wow... that is not so good.. this is on chrome, though can you link to a good reading so i can understand this more in-depth?

    also for the validator, alot of the problems seem to be the meta tags but those are all tumblr specific so the validator is actually incorrect

    i need to read up on the problems you mentioned and others, please link


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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