I have a simple jQuery slide toggle but I want hit the div on start up but it is always showing
Here is a demo I build to show u what I mean.
Maybe you can see where I am going wrong
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:Red;
border:solid 5px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">This div should always be hidden til clicked </div>
</body>
</html>
You need to hide the panel div
this should do it
#panel
{
padding:50px;
display:none;
}
Hope it helps
$(document).ready(function(){
//just need an initial run to close it first
$("#panel").slideDown();
//or if it was open to start use this instead
$("#panel").slideUp();
//rest the same
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
Related
<script>
$(document).ready(function(){
$("button").click(function(){
$(".inside").css("transform","translateX(0px)")
});
hOW DO I ABLE TO MAKE THE JS CODE TRANSLATE ON CLICK BACK AND FORTH?
if($(document).click("button")){
$(".inside").css("transform","translateX(400px)");
}
});
</script>
<style>
#cont{
background:#98bf21;
height:400px;
width:400px;
}
.inside{
background:#09C;
height:400px;
width:400px;
position:absolute;
overflow:hidden;
transform:translateX(-500px);
transition:1s;
}
</style>
<body>
<button>Button</button>
<div id="cont" >
<div class="inside"></div>
</div>
</body>
</html>
Try this
$(document).ready(function(){
var clicked = false
$("button").click(function(){
if (clicked)
$(".inside").css("transform","translateX(-500px)");
else
$(".inside").css("transform","translateX(0px)");
clicked = !clicked;
});
});
I need a functionality, where on click of the button, i need to slide up a menu and at the same time on move out of the button or of the popup menu, the menu has to be closed(slideDown).
I have multiple buttons in the page, which contains the menu, so on moving to another button on clicking menu will be opend or moving out to some other elements in DOM also i need to close the Menu.
Please suggest.
Using CSS and Jquery you can set menu css to
display:none
then just
display:block
it when button is clicked. or you can also use
Toggle
I believe you want to create a menu and a button that will show and hide from this;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</body>
</html>
I want to be able to grab all the bubbles inside the "bubble game" div and put an onclick on them so that they dissapear(delete from the page) when being clicked. I have tried making a variable in javascript that contains all bubbles in the div and then put an onclick on them but it doesn't seem to work. Preferably not using jquery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<link href="bubbles.css" rel="stylesheet">
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/bubbles.js"></script>
<script src="scripts/java.js"></script>
</head>
<body>
<!--background bubbles-->
<div id="b-blue" class="b" data-speed="1"></div>
<div id="b-green" class="b" data-speed="2"></div>
<div id="b-red" class="b" data-speed="4"></div>
<!--bubble text-->
<div id="bText">
B<br />U<br />B<br />B<br />L<br />E<br />S<br />!
</div>
<!--bubble game-->
<div id="bubbleGame">
<!-- <div class="bubble"></div> -->
</div>
<!--bubble score and reset-->
<div id="bottomCorner">
<div id="reload">refresh...</div>
<div id="score">0</div>
</div>
</body>
</html>
body{
background:black;
}
#bText{
width:300px;
float:left;
height:auto;
color:white;
font-size:300px;
text-align:center;
font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
position:relative;
z-index:10;
opacity:0.8;
}
.b{
width:100%;
height:1000%;
position:fixed;
top:0;
left:0;
}
#b-blue{ background:url(images/b-blue.png); }
#b-red{ background:url(images/b-red.png); }
#b-green{ background:url(images/b-green.png); }
#bubbleGame{
width:75%;
height:100%;
position:fixed;
right:2%;
top:0;
}
.bubble{
background:url(images/b-white.png);
background-size:cover;
position:absolute;
}
window.onload = bubblegame;
function bubble(){
var bubbleburst = document.querySelectorAll("#bubbleGame");
for(var i=0; i<bubbleburst.length; i++){
bubbleburst[i].onclick = burst;
}
}
function burst(){
alert("hi");
}
$(document).ready(function() {
$("#bubbleGame").on("click", ".bubble", function() {
$(this).hide();
})
});
If you would like to remove the element from the DOM, use $(this).remove(), instead of $(this).hide().
You should use event-Delegation:
I prepared a simplified Fiddle
document.getElementById("bubblegame").addEventListener("click", function(element){
var target=element.target;
if(target.id==='bubblegame') return;
target.style.display='none';
});
In this case, you do not add eventListener to the bubbles itself, but to the parent div.
When an element is clicked, the event bubbles up to the "catching" div, where a central dispatcher is waiting for that event. So you have the advantage of having one handler to deal with all events. For more information about delegation of events, take a look here
Since you seem to be using jQuery:
$("#bubbleGame > .bubble").click(function() {
$(this).hide();
});
without Jquery:
var bubbles = document.querySelectorAll('.bubble');
for (var bubble of bubbles) {
bubble.onclick = deleteBubble
}
function deleteBubble() {
this.parentNode.removeChild(this);
}
FIDDLE
You could use jQuery and do it like this
$(document).ready(function() {
$(".bubble").click(function() {
$(".bubble").hide();
})
});
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
http://jsfiddle.net/b6rkb/18/
I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.
CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
height:5000px;
}
.fixed{
position: fixed;
}
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
});
});
</script>
<body>
<div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
sup
</div>
You should also give the margin to the page and put the position fixed div above the page.
Working Demo
Jquery
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$(".page").stop().animate({"margin-top":"120px"}, "slow")
}, function() {
$(".page").stop().animate({"margin-top":"0"}, "slow")
$("#panel").stop().slideToggle("slow");
});
});
I'm not sure about the slideToggle, Please comment if you feel this is wrong.
try this... (You can test this http://jsfiddle.net/b6rkb/28/)
<style> <!-- Add to style -->
#page{
height:200px;
display:none;
opacity: 0;
}
</style>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$("#page").stop().slideToggle("slow"); //Add this line
});
});
</script>
<body><div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
<div id="page"> <!-- Add this div -->
test
</div>
sup
</div></body>