A div will not appear when i click a trigger

Question

I am making an OS called JSOS and in the bottom corner is a start button i have some jquery to make the menu appear when i click the button but it wont appear... heres the code:

JQuery:

$("#startbutton").click(function () {
    $("#startmenu").toggle("blind");
});

CSS:

.startmenu {
    color:gray;
    width:400;
    height:650;
}

HTML:

<div id="startmenu" class="startmenu"></div>
<footer id="taskbar" class="taskbar">
    <div id="startbutton" style="width:25px; height:25px;">
        <img src="start.png" id="startbutton" style="width:25px; height:25px;"></img>
    </div>
</footer>

is `blind` the class you want to add to `startmenu`? use `toggleClass` — , Sep 01 '13 at 08:41
Thankyou i have changed the toggle to toggleClass but it still doesnt work. the css should work... i have told it the height width and color but do you see any other problems — Zac Programmer, Sep 01 '13 at 08:47

Milan and Friends · Accepted Answer · 2013-09-02T10:32:27.663

I make you a couple of demos on jsFiddle, it's Windows based Start menu and here's a Fiddle

HTML

<footer id="taskbar" class="taskbar">

  <div id="startbutton">
    <img src="start.png" alt="Start"/>
  </div>

</footer>

CSS

#startmenu {
  background: #666;
  position: absolute;
  display: none;
  bottom: 25px;
  left: 0;
  color: gray;
  width: 400px;
  height: 650px;
}
#taskbar {
  background: #444;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#startbutton {
  background: #ccc;
  width: 50px;
  height: 25px;
  cursor: pointer;
}

jQuery

// DEMO 1

$(function() {

  $('#startbutton').click(function() {
    $('#startmenu').fadeIn('slow');
  });

  $('#startmenu').mouseleave(function() {
    $(this).fadeOut('slow');
  });

});

// DEMO 2

$(function() {

  $('#startmenu').css({ height: '0', display: 'block' });

  $('#startbutton').click(function() {
    $('#startmenu').stop().animate({ height: '650px' }, 600 );
  });

  $('#startmenu').mouseleave(function() {
    $(this).stop().animate({ height: '0' }, 600 );
  });

});

I made Windows based menu because you said "in the bottom corner is a start button". — Milan and Friends, Sep 01 '13 at 17:21
I copied the HTML code from question, removed inline CSS and overlooked double id, thanks for notice, I edited answer. P.S. I know what's invalid in many languages ;) — Milan and Friends, Sep 02 '13 at 10:42

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

1.- To start with you have to have unique IDs. You have #startbutton to both div and img elements.

2.- You need to have visible content in the div you want to show/hide, or add some height/width/border, etc with CSS so you can actually see it. otherwise its there but you don't see it.

<div id="startmenu" class="startmenu">CONTENT</div>, by adding text one can see it; and/or give it height/width/background-color/border with CSS.

Demo here

edited May 23 '17 at 10:31

Community

1
1

answered Sep 01 '13 at 08:45

Sergio

28,539
11
85
132

@ZacProgrammer, does it work in the demo? when you click the img? – Sergio Sep 01 '13 at 09:03

SarathSprakash · Answer 3 · 2013-09-01T09:38:07.490

Try this

Add this to your css display:none; so as to hide the div on the page load and then you can try your code,it works

Working DEMO

Cleaned Code

<html>
<head>
<title>Desktop</title>
<link rel="stylesheet" href="dotluv.css" />
</head>
<body>
<style>
.taskbar {
    background-image: linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -o-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -moz-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -ms-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.32, #1F5E3E),
    color-stop(0.66, #1BC27A),
    color-stop(0.83, #0CC9C9)
);
    width:100%;
    height:25px;
    position: fixed;  
        bottom: 0px;  
    cursor:pointer;

}
.background {
background-image: linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -o-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -moz-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -ms-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22, #F08C11),
    color-stop(0.61, #21FCFC)
);
    width:1350;
    height:628;
}
.window {
width:640;
height:530;
color:aqua;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#startmenu{
    display:none;
}
.startmenu {
    background:gray;
    width:400;
    height:650;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
    $( "#welcomedialog" ).dialog({
      height: 140,
      modal: true,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#internetwindow" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#internetopener" ).click(function() {
      $( "#internetwindow" ).dialog( "open" );
    });

$( "#startbutton" ).click(function() {
      $( "#startmenu" ).toggle( "blind" );
    });
});
</script>
<div id="background" class="background">
<div id="welcomedialog" title="Welcome">
<span style="color:#cf00ff;">H</span><span style="color:#d727c3;">e</span><span style="color:#df4e87;">l</span><span style="color:#e6744b;">l</span><span style="color:#ee9b0f;">o</span><span style="color:#f2b40b;"> </span><span style="color:#f7cd08;">a</span><span style="color:#fbe604;">n</span><span style="color:#ffff00;">d</span><span style="color:#bfff00;"> </span><span style="color:#80ff00;">w</span><span style="color:#40ff00;">e</span><span style="color:#00ff00;">l</span><span style="color:#00ff40;">c</span><span style="color:#00ff80;">o</span><span style="color:#00ffbf;">m</span><span style="color:#00ffff;">e</span><span style="color:#00bfff;"> </span><span style="color:#0080ff;">t</span><span style="color:#0040ff;">o</span><span style="color:#0000ff;"> </span><span style="color:#4000bf;">J</span><span style="color:#800080;">S</span><span style="color:#bf0040;">O</span><span style="color:#ff0000;">S</span>
</div>
<div id="startmenu" class="startmenu"></div>
</div>
<footer id="taskbar" class="taskbar"><div id="startbutton" style="width:25px; height:25px;"><img src="start.png" style="width:25px; height:25px;"></img></div></footer>
</body>
</html>

Who ever it may be before down vote, read the question correctly , check the answer and then down vote . — SarathSprakash, Sep 01 '13 at 08:49
it hide on page load only, on button click it will show, did you check the demo fiddle — SarathSprakash, Sep 01 '13 at 08:55
ill put it on my site so you can download it and run it... just run home.html if you get it — Zac Programmer, Sep 01 '13 at 09:09
@ZacProgrammer I had cleaned your code and posted above . Remove your code and paste this in your home.html — SarathSprakash, Sep 01 '13 at 09:39

A div will not appear when i click a trigger

3 Answers3

Cleaned Code