I am new to learning jQuery so I've been stumped with this for a while (and excuse me if my question is very obvious).
When the user loads the site, I want the screen to append square images continuously every 5 seconds, until they click "Click Me!" which stops it. The function runForever which appends the images works on it's own if I add '$' in front of '(function)', but inside my button click function, runForever doesn't run at all. I know it doesn't run because I added an alert statement for when the user loads the page, but the page never gives me this statement. It does, however, give me the alert for when I click 'Click Me!'.
$(document).ready(function() {
(function runForever() {
(".img-box").append("<div class='img-from-other-class'</div>");
setTimeout(runForever, 5000);
});
var clicked = false;
$("button").click(function() {
if (clicked == false) {
alert ("beginning repetition");
runForever();
}
else {
alert ("button clicked");
clicked = true;
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h3>jQuery Practice</h3>
</div>
<div class="col-6">
<button class="float-right">
Click Me
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="img-box">
<div class="img-from-other-class"></div>
</div>
</div>
</div>
</div>
</body>
style css in follow
.img-from-other-class{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="stop-btn">STOP</button>
<div class="image-box"></div>
<script>
$(function(){
function run(){
interval = setInterval(function(){
$('.image-box').append('<div class="img-from-other-class"></div>');
}, 5000);
}
run();
// click for stop append
$('.stop-btn').click(function(){
clearInterval(interval);
});
});
</script>
</body>
<html>
Related
I have 3 divs that fades sequentially on page load just like on this link:
http://jsfiddle.net/x4qjscgv/6/ However, I want the fade function to happen once the user clicked a button. I tried to use the function: document.getElementById but it does not appear to be working.
See full code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
document.getElementById('btn').onclick = function(e)
</script>
<style>
#chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button>
<div id="chat" class="word1">Word 1</div>
<div id="chat" class="word2">Word 2</div>
<div id="chat" class="word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
</html>
You can follow my example. But note, id is only one instance, and class can has many instances!
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btn").on('click', function(e){
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btnhide").on('click', function(e){
$('.chat').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
.chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button> <button id="btnhide"> hide divs</button>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
This line does select #btn, however it does not execute anything because the function declaration is incomplete:
document.getElementById('btn').onclick = function(e)
You must include the actions of the function like so:
document.getElementById('btn').onclick = function(e){
// add function within curly braces.
}
It's worth noting that the e is the Event object. Try adding console.log('test') and check the console (often accessed via right-click > "Inspect") for your messages.
The onclick function that you used indeed doesn't do anything, because you didn't wrapped your'e fade-in code by it. If you already using jquery, try using the click event handler, like so:
$(document).ready(function() {
$('#btn').click( function () {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
});
Modify your example:
<div id="chat1" class="word">Word 1</div>
<div id="chat2" class="word">Word 2</div>
<div id="chat3" class="word">Word 3</div>
.word {
display: none;
}
$(".word").click(function(e){
$(this).delay(10).fadeOut(1000);
});
I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I have script for slideup and slide down function in jquery, and a button each of them.
both are working fine until i thought of giving the slide up from by letting the user click anywhere in the site.. i.e., when user clicks slide down button its slides down and when he click anywhere on the screen later the content slides up.
unfortunately its having a small problem of auto sliding down and sliding up when i hit slide down button.
the script as follow::
<div id="a" name="a">
</br>
<small><p id="date2"><?php echo $row2["date"]; ?></p></small>
<p><B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
});
</script>
Any help is Appreciated..
It slides back up straight away because both your event handlers are executing - by definition a click on your show element is also a click on the window.
To stop this happening you need stopPropagation
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
e.stopPropagation(); // <-- here
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
//console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" name="a">
<br>
<small><p id="date2">date here</p></small>
<p><big><font color= #ba4a00> A:</font></big> <small>answer here</small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second
I am trying to make a start button, but whenever I test the program, it shows up but doesn't do anything.
This is what I have:
var startGame = function() { //when the start button is clicked, the game starts
$('#startButton').click(function() {
$('#main').hide();
playing = true;
});
}
$(document).ready(startGame()); //when the html loads, start the function
while (playing) {
//this is the main loop for the program
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="textHere">
<div id="main">
<h1>I am a computer.</h1>
<a class="button" id="startButton">START</a>
<!--this is the button-->
</div>
<script src="" https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ""></script>
</script>
<script src='I%20am%20a%20computer.js'></script> <!--where it gets the script-->
</body>
You're calling the startGame function instead of passing it to document.ready. It should be:
$(document).ready(startGame);
When you put parentheses after a function name, it calls it immediately. To use the function as a value, leave out the parentheses.