Every method that I have tried to create a bounce effective when my div slides up and down does not work. Any help would be greatly appreciated!
Here's my code
$(document).ready(function() {
$('#button').click(function() {
$("#div").slideToggle();
$("#div").effect('bounce', 300);
});
});
div#div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
position: relative;
display: none;
top: 30px;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click</button>
<div id="div"></div>
Thanks for any help!
https://jsfiddle.net/zs1u8b5c/
What you wrote works as intended. However, as that is not part of jQuery's main API you need to include the UI script as well.
Updated jsFiddle: https://jsfiddle.net/1gu4u8dp/
Which would be:
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
(preferably make a local copy)
Related
Please check the example
Example 1(a) , Fixed button
Example 1(b) , After Click form
I have created the fixed button but I’m not able to open the form on click. It will be very helpful if you can provide me with any resource or reference where I can learn how to make this.
Thanks in Advance.
This is pretty simple slideToggle function which show/hide element.
$(function() {
$('.sp').click(function() {
$('.form-wrapper').slideToggle("slow");
});
});
.sp{
position: absolute;
bottom: 0px; right: 0px;
cursor: pointer;
width: 120px;
background-color: gray;
}
.form-wrapper{
display:none;
height: 50px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp">Slide Me Up
<div class="form-wrapper">form goes here</div>
</div>
I am making a simple php chatbox and am starting with the css/javascript first. What I want to do is when I click the header of the chat, the main part of the chat will slide up and show, and when I click the header again, it will go down, similar to the Facebook chat. I have tried things like
$(".chatheader").on("click", function () {
$(".chatcontainer").style.display = 'visible';
}
but none of them work, here are my codes
HTML
<div id="chatbox">
<div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
<div class="chatcontainer">
test
</div>
</div>
CSS
#chatbox {
right: 0;
bottom: 0;
position: absolute;
padding-right: 50px;
}
.chatcontainer {
height: 360px;
width: 320px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
float: right;
top: 100%;
display: none;
}
.chatheader {
font-family:'PT Sans';
background: #00b4ff;
width: 322px;
height: 51px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
bottom: 360;
}
.chatheadertext {
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
DEMO
I have display: hidden; on my .chatcontainer and I would like to use javascript to make the display visible when .chatheader is clicked. Thanks in advance to anyone who can help!
You can use .slideToggle():
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
Updated Fiddle
Final code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
});
</script>
Use the jQuery slideDown() method:
$(".chatcontainer").slideDown();
And use slideUp() to hide it later.
I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});
I have a page that I want to show a div overlay with a popup. Basically, like colorbox. But I want this to be permanent. They should not be able to click out of the div. Inside of the div should be contents from popsurvey.com in an iframe. The link I need to frame is this -> http://www.popsurvey.com/s/5gzmqc/0x5513 - How do you recommend this be done? Thanks.
<script>
$(document).ready(function() {
$.colorbox({iframe:true, width:"620", height:"591", href:"http://www.popsurvey.com/s/5gzmqc/4zk4lm?embed=true", opacity: ".3"});
});
</script>
I've created a solution in jquery which is light enough and simple enough to suit your needs (I hope), Clean and simple is usually the best way to do these sort of things and 99.99% of the time it's pretty redundant to use larger plugins or prebuilt solutions.
jsfiddle demo
jsfiddle
The html:
<div id="block"></div>
<div id="iframecontainer">
<div id="loader"></div>
<iframe></iframe>
</div>
The css:
#iframecontainer {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222;z-index: 999999;}
#iframecontainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#loader {background: url('http://www.calgaryramsrugby.com/images/ajax-loader.gif');background-repeat:no-repeat; width: 250px; height: 250px; margin:auto;}
#block {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
The js:
$(document).ready(function() {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#iframecontainer iframe').attr('src', 'http://www.popsurvey.com/s/5gzmqc/0x5513');
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}