When I click on the .main_box div both arrow-up images change. I want to change only the first arrow-up image when I click on first .main_box div.
Does anyone know how to do this?
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(".arrow-up, .arrow-down").toggle();
});
});
</script>
Change to this instead, this should only toggle sub-elements to the clicked element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>
Check this jsfiddle.net
JS
$(document).ready(function() {
$('#toggle3').click(function() {
$('.toggle3').slideToggle('1100');
var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg" ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" : "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
$("#bg3").attr('src', src);
});
});
Other Code part you get From jsfiddle Link
Related
I'm new to JQuery and just wanted to add new clones on a button click:
I wrote this much code:
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
<script>
$("#button").click(function () {
});
</script>
Exactly what I am looking for is a clone, but ids should be different
$("#button").click(function () {
$('.item').append('<div>new div</div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
hope it will help
Try this :-
$("#button").click(function () {
var clone = $("#container").find(".item").last().clone();
clone.attr("id","newId");
$("#container").append(clone);
});
I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>
I want to create a div that when clicked on, pops open another div and scrolls down to it.
Here's my take on it but it is not working. What is the correct way?
html
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c- 0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>
jquery
$(document).ready(function() {
$('.image').click(function() {
$('#box').slideToggle("fast");
$('html, body').animate({
scrollTop: $('#box').offset().top
}, 2000);
});
});
Try scrollIntoView()
$(document).ready(function() {
$('.image').click(function() {
$("#box").show()
$('#box').get(0).scrollIntoView()
});
});
#box{background-color:#000;height:100px;display:block;width:100%;}
.mage{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;">
</div>
You need to remove display:none inline css and add display:none to external css of #box div. here is the updated fiddle
<div id="box">
</div>
#box{background-color:#000;height:100px;display:none;width:100%;}
I cannot figure out how to add in the functionality of closing other divs when I click a div new div with the same class. I know it should be simple, but just can't get it to work. Here is the fiddle - http://jsfiddle.net/dnym5p1s/
added correct link
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year1</h1>
</div>
<div class="option-content">
Content
</div>
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year2</h1>
</div>
<div class="option-content">
Content
</div>
$(".option-content").hide(); $(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});
This would do it:
$(".option-content,.arrow-up").hide();
$(".option-heading").click(function () {
$(".option-content").not($(this).next()).slideUp(250);
$(".option-heading").not(this).find("div.arrow-up").hide();
$(".option-heading").not(this).find("div.arrow-down").show();
$(this).next(".option-content").slideToggle(250);
$(this).find(".arrow-up, .arrow-down").toggle();
});
jsFiddle example
Just add $(".option-content").hide(); on top of your click listener like so:
$(".option-heading").click(function(){
$(".option-content").hide();
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});
I am trying to get a menu to slide from the left when I click on a link. I have been following JSFiddle without success. The div remains in one spot and does not slide. Based on the example the div should be hidden and slide into view with click then slide out when I click again. It starts off hidden then comes into view without sliding and does not slide back. I am very new to jQuery, but have been studying very hard.
In my master page I have set the scripts for the page:
<script src="/Scripts/jquery-1.11.1.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>
Is the problem that I am trying this on the master page? I need a menu for each page and would hate to think I have to add to each, but if so then that is fine.
A requirement for the fiddle you are trying to replicate is : jQuery UI 1.9.2
This can be downloaded here : http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/
On the left side of the jsFiddle you can see external requirements/dependencies
Include this just after your jquery reference and it should be fine.
Try this as your code :
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"
></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>