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>
Related
Consider the following code:
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on( 'click', function() {
$("#thediv").show();
alert('click');
});
$(document).ready(function(){
$("#thediv").hide();
})
I want the behavior to first show the div tag and then display the alert "Click". Instead the behavior works in the opposite way. Alert text is first displayed followed by the button being visible. Am i missing something ?
Can i modify the code somehow to get the desired behavior where the div is first displayed and then alert text is flashed.
Check that in jQuery.show(options) allows you to pass a PlainObject options.
And than you can use complete: A function that is called once the animation on an element is complete.
Code:
$("button").on( 'click', function() {
$("#thediv").show({
complete: function() {
alert('click');
}
});
});
$(document).ready(function(){
$("#thediv").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
It's because the alert() blocks the UI thread from updating, and that thread has not yet had time to show the element in the DOM before you call the alert().
Ideally you should use console.log() for debugging, however you can avoid this issue by putting the alert() in a setTimeout() with a very short delay.
$("button").on( 'click', function() {
$("#thediv").show();
setTimeout(function() {
alert('click');
}, 10);
});
#thediv { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on('click', function() {
$("#thediv").show("slow", callback);
});
$(document).ready(function() {
$("#thediv").hide();
})
function callback() {
alert('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>
Add parameter to .show()
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 an image map and when certain part of image is hovered it show div..(like in this website http://jquery-image-map.ssdtutorials.com/) I want the div to appear with smooth transitions... here is my js code
var mapObject = {
hover : function(area, event) {
var id = area.attr('name');
if (event.type == 'mouseover') {
$('.' + id).show();
$('#'+ id).siblings().each(function() {
if ($(this).is(':visible')) {
$(this).hide();
}
});
$('#'+ id).show();
} else {
$('.' + id).hide();
$('#'+ id).hide();
$('#room-0').show();
}
}
};
$(function() {
$('area').live('mouseover mouseout', function(event) {
mapObject.hover($(this), event);
});
});
Can anyone please suggest me the changes for smooth transitions...
thanks in advance! :)
So first of all, an unrelated tip - it would be a good idea to update jQuery a bit (if there isn't anything that depends on the old version you are using). live won't be available, instead you'll need to replace it with .on, but otherwise it's a good idea.
Secondly, sounds like all you're looking for is to give hide and show some transition. You can simply replace them with fadeIn() and fadeOut(). You can also use toggle which does it all at once (though might misbehave when used with a hover, because it will flip like crazy).
Here's a small snippet that shows you how they work:
$(document).ready(function() {
var img = $('img');
$('#show').on('click', function() {
img.fadeIn();
});
$('#hide').on('click', function() {
img.fadeOut();
});
$('#toggle').on('click', function() {
img.fadeToggle();
});
});
* { font-family: sans-serif; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show"> Show me! </button>
<button id="hide"> Hide me! </button>
<button id="toggle"> Toggle me! </button>
<br>
<br>
<img src="http://www.randomwebsite.com/images/head.jpg" />
Of course, those are just shortcut functions that use the .animate functionality, which is quite flexible on its own. Here's a link where you can read more about effects and animations in jQuery and how you can use them
Echoing what yuvi said, the 'live' function is deprecated.
I'm not sure why you have your hover function inside an object, but you could also do it like this, using fadeTo:
var mapObject = {
hover : function(area, event) {
var id = area.attr('name');
if (event.type == 'mouseover') {
$('#'+ id).fadeTo(1000, 1.0);
} else {
$('#'+ id).fadeTo(1000, 0);
}
}
};
$(function() {
$('.area').bind('mouseover mouseout', function(event){
mapObject.hover($(this), event);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div>
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>
function smooth(){
if($("#show").is(":visible")){
$("#show").hide("1000");
}
else{
$("#show").show("1000");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me<br><br>
<h1 id = "show">Shown!</h1>
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>
I'm trying to do a simple partial fade effect using toggle to toggle the opacity between two values, when an element is clicked. But the first click does nothing!
The html code:
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>
</body>
</html>
And the js code:
$(document).ready(function() {
$('div.toggler').click(function(event) {
$(this).unbind('click');
$('div.toggler').toggle(function(event) {
$('div.toggler').css({
'opacity': 0.5
});
alert('0.5');
return false;
}, function() {
$('div.toggler').css({
'opacity': 0.1
});
alert('0.1');
return false;
});
event.preventDefault();
});
});
To elaborate, it does "work", but only after the first click! So I need to click twice to begin with to get it working! I've tried this out in firefox and opera.
Edit: Went with the solution by Marcus Sá and steweb:
$('div.toggler').toggle(
function(event){
$(this).css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$(this).css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
Try this, more simple:
$('div.toggler').toggle(
function(event){
$('div.toggler').css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$('div.toggler').css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
See working here
Because you bind to click event once, then unbind, and bind to it again via toggle. What for ? Just use toggle. Here is working example.
Even easier without having to use toggle:
$('div.toggler').css('opacity', .5).click( function() {
$(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});
Actually there is not enough info here, the problem COULD be that your CSS initially sets the opacity to 0.5 to start with, so when you click toggle first, it's already at 0.5 and so it switches from 0.5 to 0.5 and nothing happens.
What I would recommend doing instead is creating 2 css tags, then check which tag is already there and replace it with the other one.
i.e. you can create:
.fiftyPercent{ opacity:0.5; }
.tenPercent{ opacity:0.1; }
Then in your html start with
<div class="toggler fiftyPercent" style="background:grey;width:300px;height:300px;"></div>
Then all you have to do in your JS is toggleClass for both the classes on click.
$('.toggler').click(function(){
$('.toggler').toggleClass('fiftyPercent');
$('.toggler').toggleClass('tenPercent');
});
That's just my 2 cents.