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");
});
});
Related
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>
I'm new to frond end development, and unfortunately have some issues calling a JavaScript function.
I have following function:
<script type="text/javascript">
$(document).ready(function () {
$("#table_div").scroll(function () {
alert("test successful");
jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
});
});
</script>
and HTML is defined as:
<div id="divHeader" class="firstpanel">
<div id="firstcol" class="firstcolumn">
<div id="table_div" class="contentpanel">
which is styled as:
.contentpanel {
overflow: scroll;
width: 300px;
height: 500px;
position: relative;
}
.firstpanel {
overflow: hidden;
width: 284px;
}
.firstcolumn {
overflow: hidden;
height: 500px;
}
and I'm experiencing a problem, since the "alert" in my JavaScript function is not triggered, when I debug my application. I have made a test in JSFiddle with exacly the same code, and it works very well, since the alert function is called, once I start scrolling my div.
I'm using JQuery 1.5.1 in my application and will prefer to prevent using a newer version in JQuery. Is the JQuery version the issue in this case ?.
You are attaching the event when the element is not render by DOM. You should wrap that code in a $(document).ready() or use delegation events:
$(document).on('scroll', "#table_div", function () {
// code
});
I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.
HTML
<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>
CSS
.DaddyBox{
border:thick;
border-color:#FFF;
}
.DaddyBox:hover{
background: green;
}
.Box1 {
position: absolute;
left: 16px;
top: 96px;
width: 320px;
height: 96px;
z-index: 1;
background-color: #F5E255;
}
JS
$('.Box1').click(function(){
alert(Alert)
});
Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.
If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.
Thanks
you missed quotes for the message in alert(), change to:
....
alert("Alert");
...
and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes to your message Alert
});
});
include java library in header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes
});
});
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");
});
I was trying to make a sort of loading bar, I've made this but it won't work... Who can help me??
<div id="loader" style="height: 2px; width: 0px; background: green;">
Test
</div>
<script>
$('#loader').animate({width:'100px'}, 15000);
</script>
Thank you!
Edit:
This one's working
<div id="loader" style="height: 2px; width: 0px; background: green;">
</div>
<script>
$(document).ready(function(){
function loader(){$('#loader').animate({width:'0px'}, 1).animate({width:'468px'}, 15000, function() {loader()});}
loader();
});
</script>
Thanks to Pahnin
http://jsfiddle.net/pahnin/d7hWD/1/
Start the animation after document is loaded
$(document).ready(function(){
$('#loader').animate({width:'100px'}, 15000);
});
Edit:
$(document).ready(function() {
// jQuery
});
The above function is used to run your jQuery code after all the dom elements are loaded, this includes libraries like jQuery too.
It works for me:
http://jsfiddle.net/SJVtr/
Are you sure you're loading including jQuery correctly?:
do you mean like :
function startLoad(){
$('#loader').animate({width:'100px'}, 15000);
setTimeout(function(){
$('#loader').css({'width':'0'});
startLoad();
}, 15000);
}
$(document).ready(startLoad);