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>
Related
I am trying to create a navigation system where there is a set of links, that when clicked, will load an external page into a div. This is what I have so far, but it doesn't work:
<div class="row">
<div class="col-md-4"><div class="navActive">Link1</div></div>
<div class="col-md-4"><div class="">Link2</div></div>
<div class="col-md-4"><div class="">Link3</div></div>
</div>
$(document).ready(function() {
$('.loadPage').click(function(e){
e.preventDefault();
var curActive = document.querySelectorAll(".navActive");
for (i=0;i<curActive.length;i++)
curActive[i] = curActive[i].className.replace( /(?:^|\s)navActive(?!\S)/g , '' );
e.preventDefault();
$('.targetLoad')
.hide()
.load(this.href), function() {
$(this).fadeIn(500);
});
$(this + ' div div').addClass('navActive');
});
});
You have a couple of errors in your code:
.load(this.href*)*, function() {...); should be .load(this.href, function() {. You want to specify a complete callback. Not just declare a function expression, right?
this div div what's that? You need $(this).find('div > div').
Summarizing it up.
$(function() {
$('.loadPage').click(function(e){
var activeCls = 'navActive';
e.preventDefault();
$('.' + activeCls).removeClass(activeCls);
$('.targetLoad')
.hide()
.load(this.href, function() {//there is no ')' after href
$(this).fadeIn(500);
});
$(this).find('div > div').addClass(activeCls);
});
});
Working demo http://jsfiddle.net/tarabyte/F4EL9/. Ignore additional code to emulate server response.
Consider doing something like this:
<a onclick="load_url('/my-page.html');">My page</a>
And then the jquery:
function load_url(url)
{
$("#target_div").load(url);
}
I’m using the following jQuery for hiding and showing content (toggle), as a tree navigation menu in my website. I found this code extremely useful because by clicking, it displays only one div at a time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
The problem is that I can close a div only by opening another div.
How to close the div by a second click on it?
You can use slideToggle, change from slideDown to slideToggle:
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideToggle(200); // instead of slideDown
}
else {
$(this).slideUp(600);
}
});
}
First of all, don't use inline event handlers.
<script type="text/javascript">
$(document).ready(function() {
var boxes = $('.city_div');
$('.city-toggle').click(function(e) {
var box = $(this).next();
var isHidden = box.is(':hidden');
boxes.slideUp(600);
if(isHidden) {
box.slideDown(200);
}
e.preventDefault();
});
});
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North
<div class="city_div" id="box01">Div #01</div>
Centre
<div class="city_div" id="box02">Div #02</div>
South
<div class="city_div" id="box03">Div #03</div>
Also, if your links don't go anywhere meaningful, use # as the href and make sure the boxes are visible by default. (Hide them using boxes.hide(); right at the start.)
Also also, <br> isn't what you should use there. <div>s are already block-level elements. If you want more padding, give them a top margin.
try this:
$(document).ready(function(){
$('.city_div').click(function(){
$(this).hide(); //or whatever code you want to hide it
});
});
that way when you click on a div, it will hide it.
Since you are using jQuery you could try using the jQuery.toggle function.
function show_region(chosen_region) {
$('#' + chosen_region).toggle('slide');
return false;
}
Keep track of the div you have clicked last:
var globalLastClickedButtonId;
$("div.city_div").click(function() {
if (globalLastClickedButtonId == $(this).attr("id")) {
$(this).hide();
} else {
var box = $(this).next().next();
var clickedId = $(this).attr("id");
$("div.city_div").each(function() {
if ($(this).attr("id") == clickedId)
box.slideDown(200);
else
box.slideUp(600);
}
}
globalLastClickedButtonId = $(this).attr("id");
});
First, why are you using such an old version of jQuery?
Second, your JavaScript can be simplified. jQuery works on sets; you don't need the .each, or loops.
Here is a working example: http://jsfiddle.net/gibble/25P9z/
Simplified HTML:
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
New JavaScript:
function show_region(e) {
var $target = $(e.target);
var chosen_region = $target.attr('data-contentDiv');
var openDiv = $('#' + chosen_region);
openDiv.slideDown(200);
$('.city_div').not(openDiv).slideUp(600);
}
Last, attach events, don't inline them in your HTML.
$('a[data-contentDiv]').click(show_region);
Because you are using an animation it is best to keep track of the div that is currently shown. If you don't, then you will start to see multiple divs showing if you click links in quick succession.
You can use this:
$(function() {
$("a").click(function(e) {
e.preventDefault();
var selectedDiv = $("#" + $(this).attr("href"));
var hide = selectedDiv.data("shown");
$(".city_div").slideUp(600);
$(".city_div").data("shown", false);
if (hide) {
selectedDiv.data("shown", false);
}
else {
selectedDiv.data("shown", true);
selectedDiv.slideDown(200);
}
});
});
Here is a working example
You should keep a variable with your old chosen region name
<script type="text/javascript">
var old_chosen_region="";
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) {
$(this).slideDown(200);
old_chosen_region=chosen_region;
} else {
$(this).slideUp(600);
}
}
old_chosen_region='';
});
</script>
This allows you to 'remember' which region you chose last and, if the chosen one equals the last you close it.
You should set old_chosen_region='' in the end to let the tab reopen.
I’m trying to change the class of an element when it is clicked on from one value A to value B and then from value B back to value A when it is clicked a second time. I found some code on here that allowed me to change it once, but not a second time. (See original here).
Here is the original code:
<script type="text/javascript">
function changeClass() {
document.getElementById("MyElement").className += " MyClass";
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
}
</script>
And here is my code:
<script type="text/javascript">
function changeClass() {
if (document.getElementByID("arrow").className == "arrowdown") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
}
elseif(document.getElementByID("arrow").className == "arrowup") {
document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
}
}
</script>
$('#arrow').toggleClass('arrowup arrowdown');
Why not simply use jQuery toggleClass instead along with a id selector?
$('#arrow').toggleClass('arrowup');
$('#arrow').toggleClass('arrowdown');
And save yourself debugging and a few lines of code!
Check this FIDDLE
Its far easier with JQuery..
$(function() {
var i = 0;
$('div').on('click', function() {
i++;
if( i % 2 == 0){
$(this).addClass('arrowup').removeClass('arrowdown');
}
else{
$(this).addClass('arrowdown').removeClass('arrowup');
}
});
});
just use jquery addClass() and removeClass() or even better the toggleClass inside your click event
<div id="elemID" class="class1">
</div>
function changeClass()
{
$("#elemID").toggleClass("class1");
$("#elemID").toggleClass("class2");
}
REF's
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
http://api.jquery.com/toggleClass/
Cheers
I faced something similar to this today. In my code for each feature the user would express his opinion by pressing thumbs up or thumbs down. The selected thumb icon would have a brighter color, so when the user would click the thumbs up icon, the thumbs up icon would turn green and the thumbs down icon (if it were green) would turn black.
I solved it using jQuery:
$(document).ready(function () {
$('#vote-yes-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('true');
$('#1vote-yes-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-no-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
$('#vote-no-#(Model.ProductReviewId)').click(function () {
setProductReviewHelpfulness#(Model.ProductReviewId)('false');
$('#1vote-no-#(Model.ProductReviewId)').toggleClass('green');
$('#1vote-yes-#(Model.ProductReviewId)').removeClass('green').addClass('black');
});
});
I have a 3X3 box and currently I have it so that when you hover over any one of the squares the background turns blue and then when you hover out the box reverts back to empty. I also have it so that when any of the boxes are clicked an image appears. What I am trying to accomplish now is to make it so that when the box is clicked the image will appear and when that same box is clicked again the image will disappear and so on using Jquery.
Here is what I have:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('.divs').hover(function () {
$(this).css("background-color", "#0000EE");
console.log('hover');
}, function () {
$(this).css("background-color", "");
console.log('hoverout');
});
$('.divs').click(function () {
$(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
console.log('divclicked');
});
});
Just check if there is an image there already
var $img = $("img", this);
if ($img.length > 0)
$img.remove();
else
$(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
If you don't want to remove the image, you just toggle the visibility
var $img = $("img", this);
if ($img.length > 0) {
$img.toggle();
} else {
$(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
}
Have you tried jQuery().hide() and jQuery().show()
The other option is to use CSS :hover attribute.
.divs:hover {
background-color: #0000ee;
}
Regarding click you can add images to your divs and use jQuery toggling.
HTML:
<div class="divs"><img src="..." alt=""></div>
JavaScript:
$('.divs').click(function () {
$(this).children("img").toggle();
});
Try the following code in you click function
if($('img.divimg').length == 0){
$('img.divimg').fadeOut(function(){
$(this).remove()
});
}else{
$(this).prepend("<img class='divimg' style='display:none;' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>").fadeIn();
}
Another option is to make the remove action on the added image (when it is clicked).
var img = $('<img>')
.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png')
.addClass('divimg')
.css('display', 'none')
.bind('click', function(){
$(this).remove();
});
$(this).prepend(img);
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>