Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › show/hide content on click with js

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 37 total)
1 2 3
  • Author
    Posts
  • February 26, 2017 at 1:54 pm #251997
    Funkaholik
    Participant

    Superb work!

    Seems like transitions not working anymore(
    X kicks in too fast, divs also.

    February 26, 2017 at 11:51 pm #252010
    Shikkediel
    Participant

    Yeah, I left it out for the divs because it kinda depends on the exact final layout. If they would have keep occupying the space they are taking up, it requires a workaround to use the native fade of jQuery (because that uses display: none for hiding).

    When it comes to the inner text of the buttons, I will require an extra step of coding because they would have to be separate elements to enable a fade…

    I can have another look at it though.

    February 27, 2017 at 5:06 am #252016
    Shikkediel
    Participant

    Well there you have it…

    codepen.io/anon/pen/MpwvbE

    I’m not sure I’m really doing you any favour by not letting you plow around with it though. ;-)

    February 27, 2017 at 5:37 am #252018
    Funkaholik
    Participant

    thanx for that .. apriciate it
    i’m really felling guilty for exploiting you Shikk,
    but my knowledge lays across some html/css so i have no idea how to make this happens)

    so where we control speed of fading ?))

    February 27, 2017 at 6:30 am #252020
    Shikkediel
    Participant

    For the transition with the buttons, you can add a speed like this (default is 400):

    .fadeIn(500)

    There are four of these, fadeOut() included, if you’d like to adapt them…

    Speed of fading the larger content (in ms) is determined in these two lines:

    subject.eq(spot).stop().fadeTo(400, 1).addClass('active showing');

    $('.showing').removeClass('showing').stop().fadeTo(400, 0, function() {

    I wouldn’t be coding stuff if I didn’t find it at least a bit interesting so no guilt required. :-)

    February 27, 2017 at 7:55 am #252027
    Funkaholik
    Participant

    cool

    March 1, 2017 at 1:38 pm #252138
    Funkaholik
    Participant

    Maaan .. i have the very last thing to ask you about that plugin you kindly made for me))
    you see i’ve added hover with focus there but it flips back only if you click a free space and if you click X it doesn’t(
    how to remove :focus when you click X?

    March 1, 2017 at 2:11 pm #252142
    Shikkediel
    Participant

    You could use the class that specifies the currently active button in the script for it instead:

    .menu__icon:focus {
  background-color: black;
  color: white;
}

    Would then become this:

    .busy {
  background-color: black;
  color: white;
}
    March 1, 2017 at 2:22 pm #252143
    Funkaholik
    Participant

    i didn’t even knew that i have that class lol
    but now i see .. it’s that easy
    thanx again.,)

    March 1, 2017 at 3:22 pm #252145
    Shikkediel
    Participant

    No probz. :-)

    March 6, 2017 at 10:35 am #252451
    Funkaholik
    Participant

    Back again on this one
    was thinkin on a button inside content div that will close it too same as menu bubbles
    and then i figured that i can just add same class to X and it worked haha

    but still i’m thinkin on using id’s as a selector not classes (do you think it would be a messy js?)
    so that I wasn’t dependent on the order of elements but they would be still relate to each other
    i mean that show/hide toogle effect

    March 6, 2017 at 1:26 pm #252453
    Shikkediel
    Participant

    I think using ids would be circumventive, I’m sure there are better ways…
    You’re aware that’s it is only the general order of the .content elements that matters, right? They don’t actually have to be siblings but can be placed anywhere on the page.

    March 6, 2017 at 2:23 pm #252460
    Funkaholik
    Participant

    i think i am .. watch this
    i didn’t mentioned your help with js because nobody would hire me then lol

    March 6, 2017 at 5:21 pm #252464
    philipca
    Participant

    I’m a beginner (really not knowledgable!!) at these things…

    I copied the demo code from https://css-tricks.com/exposing-form-fields-radio-button-css/ and put the HTML into a webpage, and put the CSS into a stylesheet called by that page.

    But I don’t know where to put the JQuery stuff (my ignorance, only a beginner)

    The page calls jquery-1.8.0.min.js in its <head>
    and I put the JQuery code (from “var FormStuff = {” ..to.. “FormStuff.init();” into the HTML page just before the &lt;/body&gt; tag but that don’t work!!

    So, where should that go??

    March 7, 2017 at 12:51 am #252469
    Funkaholik
    Participant

    Well .. we were here on the other thing a bit))

    but as i’m concern .. you need to add this line to your head like here
    then create a file with extension . js put all js code there and link your html file to it same as Jquery or css

    By the way in the pen you refered to they’re using SCSS instead of CSS
    so you have to click compile to CSS before copiyng stuff

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 37 total)
1 2 3
  • The forum ‘JavaScript’ is closed to new topics and replies.