I want to make the length of one of my divs longer on a button click, however the jquery doesn't seem to be working. Here's the script.
<script type="text/javascript">
$(document).ready(function(){
function extendContainer() {
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
}
})
</script>
Here's the html, with the code for the button
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
And here's the css just in case.
#one .container {
width: 50em;
height: 22em; /* Height of the #one section*/
}
You shouldn't need the onclick="extendContainer()" attribute, or the function itself for this to work, as you are attaching the handler rather than performing the action when you call extendContainer():
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
})
and
<div id="div1" id="buttons">
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
Should be enough
I guess you want this :
function extendContainer() {
$('#one .container').animate({
height: "200px"
},
300);
}
And of course, add the relevant HTML in your code to make the animation works :
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
<div id="one">
<div class="container">test</div>
</div>
</div>
Besides, you can choose between the click() event in jQuery and the onclick on the input but both in same time are useless.
It's not working because the onlick method is only applying a listener, not calling the method you want. Anyway, you can remove the onclick attribute (and by the way, you have two of them, I don't understand why) from the input element, and use only this:
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
}, 300);
});
});
This should work. Also you're applying this to an element (with id "one" - #one) that I don't see in you HTML code, so you have to create it too.
Related
What I want to do is:
Make my div hidden when the page loads, and then when you click a different div it will show. My limited knowledge doesn't really allow me to make this happen. What am I doing wrong?
jQuery:
$(document).ready(function(){
$('#trojkat2').click(function(){
$('#login').hide();
});
});
</script>
"trojkat2" is the div I want to click to make "login" appear.
HTML:
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
What have I done wrong?
First, hide your #login div when document ready by .hide() function, after click $(.trojkat2), use show() to make #login appear, by the way class selector is . instead of #
$(document).ready(function(){
$('.login').hide();
$('.trojkat2').click(function(){
$('.login').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kwadrat2">
<div class="trojkat2">click here
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
Try this:
$('.trojkat2').click(function() {
$('.login').show();
});
Your example doesn't have an element with id = trojkat2 so your selector $("#trojkat2") won't work. Same is for #login. Instead you need to change it to a class selector :
$('.trojkat2').click(function(){
$('.login').hide();
});
Example : http://jsfiddle.net/DinoMyte/nrNX8/529/
In your HTML code, you created classes called login and trojkat2. However, in your jQuery, you are telling it to call the IDs called login and trojkat2. Classes are preceded with a "." and IDs are preceded with a "#". Instead, try the following code in your jQuery:
$(document).ready(function(){
$('.trojkat2').click(function(){
$('.login').hide();
});
});
I have an link that when clicked, has to show 2 other links.
But when I click my link, nothing happends. Really nothing.
I have loaded in jquery before I have my script.
This is my jquery script:
$("#imd").toggle(function(){
$("#anw").animate({opacity:1},200);
$("#3d").animate({marginTop:75}, 200);
},function(){
$("#anw").animate({opacity:0},200);
$("#3d").animate({marginTop:0}, 200);
});
This is my CSS:
#anw {
width: 50%;
background-color: #0f0;
opacity: 0;
}
And this is my HTML markup
<div class="mid">
<h1>Interactive Media Design</h1>
<div id="anw"><br><a class="left" href="website.html">Apps</a><a class="right" href="website.html">Websites</a></div>
<hr>
<h1 id="3d"><a href="#">3D Modelling</h1>
</div>
<div class="bottom">
<h1>Contact and about me</h1>
</div>
My apologies if this is a very dumb question, but I have no clue.. Also the documentation I can find is not filling my needs.
You need to work with a click handler:
$("#imd").click(function(){
$("#anw").toggle(function(){
$(this).animate({opacity:1},200);
}, function() {
$(this).animate({opacity:0},200);
});
$("#3d").toggle(function() {
$(this).animate({marginTop:75}, 200);
},function() {
$(this).animate({marginTop:0}, 200);
})
});
See the Fiddle: https://jsfiddle.net/8Lpvty1w/
Working fiddle for what you want to do: https://jsfiddle.net/rr9Lvjgh/
Essentially:
$("#imd").on('click', function(){
// code to change stuff here
});
Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link.
jQuery
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().children('.uploadboy').slideToggle(200, 'swing');
});
});
HTML
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
example in jsFiddle
Use the below script, .find method only searches for the descendants (http://api.jquery.com/find/).
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().parent().next('.uploadboy').slideToggle(200, 'swing');
});
});
As I mentioned in my comment above, IDs must be unique. That said, try this:
$("input").click(function () {
$(this).slideToggle(200, 'swing');
});
jsFiddle example
What I initially see here that's an issue is that you have 2 input buttons with the same id. While this may not be the overall issue, you still can't have 2 elements with the same id. I also am not sure if this is just generic code you cleaned to ask a question, but your selectors seem pretty complicated. You attach the .click event to both input buttons, then you go to the buttons parent, which is the paragraph, then you go the child object which is the button. You are essentially going from point one spot, up a level, then back down a level. When the click handler is attached to the button, anytime you click a button, you can reference $(this) to refer to the button.
<input type="button" name="uploadboy" id="button1" />
<input type="button" name="uploadboy" id="button2" />
$(document).ready(function(){
$("input:button[name='uploadboy']").click(function () {
$(this).SlideToggle(200, 'swing');
});
});
If you look at the function that is ran when the input button is clicked, it simply refers to the $(this) object. This is a benefit of jquery and $(this) is the specific button that you clicked. Even if there are 20 buttons on the page, whatever button is clicked will be this. So in the above example, the button clicked will have the slide toggle occur. You could also navigate the dom off of this if you need to move around like before.
Is there a way for the label/form below the 'myContent' div to have a smoother transition when I am hiding/showing it?
Currently, when the myContent div is toggled, the other elements below it 'jump' into place - it would be great if I could figure out a way to slide them up into their correct location. What do you think?
JavaScript
function toggleDiv(divId) {
jQuery("#" + divId).toggle("slide", {
direction: "up"
});
}
function ShowThing(divID) {
jQuery("#" + divID).show("slide", {
direction: "up"
}, 500);
}
function HideThing(divID) {
jQuery("#" + divID).hide("slide", {
direction: "up"
}, 500);
}
HTML
Toggle Button
<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
Click Here for jsFiddle
Optimized the javascript so that all code is based on jQuery.
HTML code
Toggle Button
<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
jQuery Code:
$(function(){
$('a.togglebtn').click(function(){
$('#myContent').stop().slideToggle(500);
return false;
});
$('#showthing').click(function(){
$('#myContent').slideDown(500);
});
$('#hidething').click(function(){
$('#myContent').stop().slideUp(500);
});
});
Your Jsfiddle is blank.
Instead of show() you can use slideDown('slow');
for hide you can use slideUp('slow'); Also you can set direction.
Otherwise you can use JQuery Animate
I have this code in my page.
<div class="MenuItemContainer">
<a href="javascript:ShowHelpMenu()">
<div class="MenuItemContent">
<div>
<img src="/Content/TopMenu/Icons/Help.png" alt="Help" />
</div>
<div>
Help
</div>
<div id="divHelpMenu" class="HelpMenuDisplayDiv" style="z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" onmouseout="HideHelpMenu()">
<%=Session["helpUrls"]%>
<%-- <%=Session["Links"]%>
--%>
</div>
</div>
This is my Functions
function ShowHelpMenu() {
$("#divHelpMenu").css("display","block");
}
function HideHelpMenu() {
$("#divHelpMenu").css("display","none");
}
When I click on Help Link I can display all the Links but when I mouseover on the links my Div tag is closing. onmouseout event is not firing when I mouse out from the div tag.
its closing when I mouse in on HTML links.
Thanks
It looks like you have your mouse out code on the wrong element, I think you'd want it on the MenuItemContainer div. You could also remove your inline mouse out code and bind the event to the correct container when you show the help div, like this:
function ShowHelpMenu() {
$("#divHelpMenu").css("display","block");
$('#MenuItemContainer').bind('mouseout.helpmenu', HideHelpMenu);
}
function HideHelpMenu() {
$("#divHelpMenu").css("display","none");
$('#MenuItemContainer').unbind('mouseout.helpmenu');
}
You missing some closing tags. Try next HTML markup:
<div class="MenuItemContainer">
<a href="#" onclick="javascript:ShowHelpMenu();return false;">
<div class="MenuItemContent">
<div><img src="/Content/TopMenu/Icons/Help.png" alt="Help" /></div>
<div>Help</div>
</div>
</a><br/>
<div id="divHelpMenu" class="HelpMenuDisplayDiv"
style="display:none;z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua"
onmouseout="HideHelpMenu()">
Link1<br/>
Link2<br/>
Link3<br/>
Link4<br/>
Link5<br/>
Link6<br/>
</div>
</div>
I got it working,
$(document).ready(function () {
$('#divHelpMenu').hover(function () {
$("#divHelpMenu").css("display", "block");
}, function () {
$("#divHelpMenu").css("display", "none");
});
});