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>
Related
I want to extract the text of the div on hover but so far I getting the text of all the divs.
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I tried using the following command :
$('.a').on('hover').text();
Any suggestions?
To get the first div only, target a:first then get the text of that element using this
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
Try this code
$('.a:first').on('mouseenter', function() {
alert( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
You can use the below code to get the text of the hovered div.
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I'm using this code for removing empty iframes but I dont't know where I'm failing:
<body>
<section class="fu-banner-ad-list">
<div class="fu-wfb-wrapper">
<div class="mdl-cell mdl-cell--2-col ">
<div class="adunit fu-banner-wfb " data-adunit="XXX_YYY42 " data-dimensions="150x50 ">
</div>
</div>
</div>
....more iframes
</section>
<script type="text/javascript">
if ($('.mdl-cell--2-col').is(':empty')) {
$('.mdl-cell--2-col').remove();
}
</script>
</body>
Can you try $('.mdl-cell--2-col').empty()?
more info here
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
html:
<div class="wrap">
<div class="fotorama"><img src="img1.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
<div class="wrap">
<div class="fotorama"><img src="img2.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
<div class="wrap">
<div class="fotorama"><img src="img3.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
jQuery
$(".fotorama-fullscreen").each(function(){
$this = $(this);
$this.on('click', function(){
$("#wrapper").fadeTo(1000, 0, function(){
$("#main").isotope("destroy");
$this.prev().trigger('fullscreenopen'); <== My trigger
$("#wrapper").fadeTo(1000, 1);
});
});
});
I have a bounch of galleries which I open in fullscreen by pressing a button. The above code works on desk but when I'm on an iPad it doesn't open the gallery which leads me to think .prev(); doesn't work on an ipad? Or am I doing something wrong in finding and addressing the correct path?
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.