I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Related
I'm Trying to popup an alert when a button is clicked using jQuery but for some reason its not working.
$(document).ready(function () {
$("#find").click(function () {
alert("Hi");
});
});
Here is the link to code:Weather
Kindly let me what I'm I doing wrong.
You should try this instead.
$(function(){
$("#find").on('click',function () {
alert("Hi");
});
});
When you click 'Darrien Tu' the text on the far right disappears but it doesn't come back when you reclick the name.
https://jsfiddle.net/gkrh0ok0/1/
$("#nav_list").click(function () {
$(".sidebar-right").toggle();
});
I have check the fiddle. There is one issue in .sidebar-right
You have given margin-left:80% instead of give right:20px
This might help to solve your issue.
I have update your script code :
<script>
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open').after($(".sidebar-right").toggle('slow'));
});
});
</script>
Add comment to this code
<script>
/*$("#nav_list").click(function() {
// assumes element with id='button'
$(".sidebar-right").toggle();
});*/
</script>
I'm using the script below to change a background image on click, but I'd like the transition to be a bit smoother with a fadein. Would that be possible?
Here is the script:
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>
fadeOut the .class element first and use the callback function to change the css and to fadeIn again....
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeOut(1000,function(){
$(this).css("background-image", "url('http://website.com/images/image.png')").fadeIn('slow');
})
});
});
</script>
Try this, it will give you a nice fadeIn effect.
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeIn(800).css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>
The code
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
</script>
<body>
<button class="demo">click me</button>
</body>
The first Hello! is OK, but I am demo can't?What's the matter?
the similar question
jquery each selector doesnt work
Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:
Change this:
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
To this:
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
Bind the click event inside ready()
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
see this demo
$(".demo").live('click',function() {
alert("I am demo");
});
Im trying to toggle some divs and its not working, here is the js:
<script type="text/javascript">
$(function(){
$('#toggle_full').click(function(){
$('#full_size').removeClass('toggle');
$('#thumb_list').addClass('toggle');
});
});
$(function(){
$('#toggle_thumb').click(function(){
$('#thumb_list').removeClass('toggle');
$('#full_size').addClass('toggle');
});
});
</script>
Here are the anchors:
<div class="toggle_block">
<img src="img/full_icon.jpg" alt="#"/>
<img src="img/thumbs_icon.jpg" alt="#"/>
</div>
Here is the class:
.toggle {
display: none;
}
Now where is the problem?
Your ID's don't match.
In your HTML you have toggle_thumbs, but in your code you have toggle_thumb.
If all you're doing is hiding and showing, you can greatly simplify your code like this:
http://jsfiddle.net/xTPU8/2/
$(function() {
var $elems = $('#toggle_full').hide()
.add('#toggle_thumb').click(function() {
$elems.toggle();
});
});
EDIT: Made it even a little more efficient.
Add a return false; in your .click() delegate to prevent the browser from navigating to '#' (jumps to top of page).
You can also simplify your JS but putting both of your link bindings in the same, and using hide() and show() as already suggested. The end result would be:
<script type="text/javascript">
$(function() {
$('#toggle_full').click(function() {
$('#full_size').show();
$('#thumb_list').hide();
return false;
});
$('#toggle_thumb').click(function() {
$('#thumb_list').show();
$('#full_size').hide();
return false;
});
});
</script>