So I've just started with Javascript and learning the Jquery library, I have this simple box which I created in CSS and was animating it with Jquery, when a button is clicked the box gets bigger but when another is clicked it returns to its original size.
I've got the button to make the box bigger to work just fine but I can't seem to get the button to make it smaller to actually make it smaller.
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
width: '-=150px;'
});
});
.box1 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box1'></div>
<button type='button' class='big'>big</button>
<button type='button' class='small'>small</button>
I don't understand why it won't work, sorry if this comes across as a silly question.
The reason why it's not working is that you added ; in height: '-=150px;'
If you remove it it's working just fine.
Demo
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
height: '-=150px'
});
});
.box1{
width:10px;
height:10px;
background-color:blue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small">small</div>
<div class="big">big</div>
<div class="box1"></div>
Related
Here is the answer to the question, thanks to #CumminUp07
I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});
#search,
#suggestions {
width: 200px;
}
#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}
#suggestions div:hover {
background-color: #99CCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>
I do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.
You can stop the animation from completing and then just show the suggestions
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#suggestions').stop(true,true).show();
$('#search').focus();
$('#search').val($(this).html());
});
Maybe it will help you
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#search').blur();
});
https://jsfiddle.net/vc15r7qb/
I am new to jquery and have problem with one part of my script. basically I am making dropdown div when mouse is over the button, but div starts moving up and down like crazy. here is what i have done: `
<script type="text/javascript">
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
$("#drop1").slideDown();
});
$("#first").mouseout(function(){
$("#drop1").slideUp();
});
});
also I tried using boolean variable but it gives me error.
<script type="text/javascript">
$(document).ready(function(){
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
$("#drop1").slideDown();
opened = true;
}
});
$("#first").mouseout(function(){
if(opened){
$("#drop1").slideUp();
opened = false;
}
});
});
here is HTML if you want, but I think there is everything ok.
<link rel="stylesheet" type="text/css" href="design.css">
<div id="first" style="position: absolute; left: 0px;">
<a class="btn" href = "TheShooter/Launcher.exe" ><b>LAN shooter project</b></a>
<div id="drop1">
<em>shooter project main page</em> <br/>
info: Local Area Network multiplayer game, made with unity. Project not finished yet, but sometimes fun to play. <br/>
controls: walking: w,a,s,d<br/>
shoot: LMB.<br/>
zoom: RMB.
</div>
</div>
Thanks for any help.
--Nick.
So it looks like you might be more used to strongly typed languages like C#. JavaScript and its library jQuery are loosely typed, meaning you don't declare scope or type. Here's your code above cleaned up a bit to use correct syntax and solve the issues you're seeing:
$(document).ready(function(){
var opened = false;
// Instead of sliding this up, give the #drop1 element
// a property of display: none; to start - then remove the line below
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
// Below, I'm using a callback, which means the boolean
// won't update to true until after the animation is finished
$("#drop1").slideDown(400, function() {
opened = true;
});
}
})// Since it's the same element, we can chain events
.mouseout(function(){
if(opened){
// Another callback
$("#drop1").slideUp(400, function() {
opened = false;
});
}
}
});
});
Let me know if you have any questions about the above!
Hi please refer this fiddle which should answer your question. No need to add any boolean or conditional checking:
<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
and js
$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").stop().slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});
and css
#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
}
#video
{
display:none;
width:1024px;
height:278px;
border: 1px solid #000;
}
I think you should try something like this:
$(document).ready(function() {
$("#first").mouseover(function(){
$("#drop1").slideDown("slow");
});
$("#first").mouseout(function(){
$("#drop1").slideUp("slow");
});
});
See this example above, from the jQuery offical documentation, for more information:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
Here is one more answer with live example,
$(document).ready(function(){
$("#drop1").mouseover(function(){
$("#first").slideDown("slow");
});
$("#drop1").mouseout(function(){
$("#first").slideUp("slow");
});
});
#first, #drop1 {
padding: 5px;
text-align: center;
background-color: #acacac;
border: solid 1px #c3c3c3;
}
#first {
padding: 50px;
display: none;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="drop1">Mouse over on panel to slide down</div>
<div id="first">Hello Stackoverflow ..!</div>
Been trying to make a button which opens a div containing another html page. I had the button working but the main page was opening with the div shown already, I needed it hidden. After messing it all up I'm stuck on this. The button doesn't work.
html
<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/"></object>
</div>
css
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
}
js
$('#button1').click(function(){
$('#Ahover').toggle()
});
Fiddle
Any help, what I'm I doing wrong? And is this even possible.
Thanks, got it working in the end by moving the script into tag.
Try This code:
HTML:
<p>Press the button</p><button id="button1">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/" >
</object></div>
CSS:
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
display:inline-block
}
JS:
$('#button1').on('click',function(e){
$('#Ahover').toggle();
});
Demo is here:
https://jsfiddle.net/Dee0565/aaqfykz3/2/
html:
<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>
js:
$('#button1').click(function(){
$('#Ahover').toggle();
$("#Ahover").html('<object data="http://validator.w3.org/" />');
});
css:
div {
height: 100%;
}
object {
width: 100%;
min-height: 100%;
}
js fiddle: http://jsfiddle.net/SsJsL/
Check out the working demo here - http://jsfiddle.net/x2qjdfwk/
The only change is to remove the show() function from the button as you are already applying the jQuery click event to it.
<p>Press the button</p><button id="button1">Show / Hide</button>
And make sure you include the jQuery library.
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});