javascript rotate what to change

javascript rotate what to change - javascript

I have ,
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
});
my problem is when I click outside arrow do not return first position what I must change ?
i can't use css and toggle whit jquery I need to use images with outside place
http://jsfiddle.net/cYCnD/9/

You should add the following handler:
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
$('.arrow').attr('src', 'select_arrow.png');
}
});
See my fiddle: http://jsfiddle.net/cYCnD/10/
The whole code should look like this:
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
allArrows.attr('src', 'select_arrow.png');
}
});
});

If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page.
If so, I believe this will work:
$(document).click(function(e){
if(!$(e.target).hasClass('arrow'))
$(".arrow").attr("src", select_arrow.png)
});

Related

jQuery menu in need of additional functionality

I wanted to create a small and lean as possible menu that hides itself on scroll at certain viewport height, shows itself after You click a button, and I did, but I have 2 problems with it:
Here is a Fiddle for You to follow along.
When you show the menu by clicking the button it appears, but the only way for it to go away is if You scroll down or up. How can I make it dissapear if I click somewhere out of the #sideBar container e.g. the site.
When You refresh the page using a soft-refresh (F5) the menu appears because the browser understands that as if the page have been scrolled. Is there a way to bypass this as well?
Here is some code, just because the fiddle requires it:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
} else {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
});
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
});
Thanks in advance!

Test the target:
DEMO
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
if ($(document).scrollTop() < 400) showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
Here is a shorter version
DEMO
function toggleIt(show) {
if (show) {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
else {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
}
$(document).scroll(function () {
var y = $(this).scrollTop();
toggleIt(y > 400);
});
$(function(){
toggleIt($(document).scrollTop()<400);
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) toggleIt(false);
});
});

I can help with the first question, you can change your JQuery code below so that when the parent 'content' container is clicked the menu slides up.
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
I'm not sure I follow the second question? Please can you provide more information on what you mean.

For Question 1, Just put the following code in ready function
$('#content').click(function(){
$('#sideBar').slideUp();
});
EDITED
For Question 2, put following code in ready function
$(document).trigger('scroll');
In short, your ready function should look like
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

A child, combination of #mplungjan and #Gagan Jaura's responses seems to do the job:
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

jquery show hide each div onclick

I have a dynamic number of divs which generated through asp.net. I need to show each div contents by clicking on its header. I have tried this {
$(function () {
var myHead = $(".toggle-container").find(".toggle-header");
var myBody = $(myHead).parent().find(".toggle-content");
$(myHead).click(function () {
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
But it's working only for first header and rest of the headers doesn't collapse it's children content. Here is the JsFiddle Link what I have tried so far. Can anyone give a fix?

The problem was how you were finding the content to be displayed/hidden. You need to find the content related to the clicked header you the code var myBody = $(myHead).parent().find(".toggle-content"); should go inside the click handler as var myBody = $(this).next()
$(function () {
var myHead = $(".toggle-container .toggle-header");
$(myHead).click(function () {
var myBody = $(this).next()
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
Demo: Fiddle
Note: Still the up-down arrows are nor working because you need to use find() instead of children()
But it can be simplified as
jQuery(function ($) {
var $heads = $(".toggle-container .toggle-header");
$heads.click(function () {
var $this = $(this);
$this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up');
$this.next().slideToggle("slow");
});
});
Demo: Fiddle

The below would work.
In your original code you had assigned the variable myBody a value at the time of load itself. Since there are many such elements, it used only the first one.
Now I have moved the value setting for the myBody variable to be inside the click event and used $(this). This will make sure that it always finds the element in relation to the current element that was clicked.
$(function () {
var myHead = $(".toggle-container").find(".toggle-header");
$(myHead).click(function () {
var myBody = $(this).parent().find(".toggle-content");
//console.log('yes');
if ($(myBody).css('display') === 'none') {
$(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up');
$(this).parent().find(".toggle-content").slideDown("slow");
} else if ($(myBody).css('display') === 'block') {
$(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down');
$(this).parent().find(".toggle-content").slideUp("slow");
};
});
});
Fiddle Demo

Getting the next image and previous image from an gallery

I am trying to code my own image gallery using html css jquery. I have a modal window to show the clicked in images. Inside my modal window I have a previous and next button.
My question is how can i show the previous images or next images when someone click that button.
Here's my jsFiddle
jquery code i am using to show clicked in images.
$(function(){
$('.gallery a').click(function(evt) {
evt.preventDefault( );
var imgPath = $(this).attr('href');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',imgPath);
return false;
});
});

Add this to your jQuery.
Declare a variable current image in your function and keep current image saved in that variable. Update the variable whenever current image is changed.
Updated jsfiddle
Click on the second image in the images and see the prev and next image then.
$('.gallery-control-previous').click(function(){
var imgPath = current_img.prev().attr('href');
current_img = current_img.prev();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
var imgPath = current_img.next().attr('href');
current_img = current_img.next();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
If you have understood this answer, add checks to the code showing next, prev elemments only when they exist.
You can find how to do that,
here..
Updated.
Get the first child of next row, and pass that.
$('.gallery-control-next').click(function(){
if(current_img.next().length){
current_img = current_img.next();
}else{
current_img = current_img.parents(".row").next(".row").find("a:first");
}
var imgPath = current_img.attr('href');
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});

I have added img_no to each a tag to identify the current active image and get next or previous image
Working Demo
$(function () {
$('.gallery a').click(function (evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var img_no = $(this).attr('img_no');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
return false;
});
});
i = 1;
$('.row a img').each(function () {
$(this).attr('img_no', i);
$(this).parents('a').attr('img_no', i);
i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no++;
if (img_no > images_length) {
img_no = 1;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no--;
if (img_no <= 0) {
img_no = images_length;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});

JQuery .hover / .on('mouseleave') not functioning properly

I am trying to use the hover function which is pretty rudimentary, but I can't seem to get the mouseout/mouseleave to function properly.
Code:
$(document).ready(function(){
$('.SList').css('display','none');
$(".MList a").on('mouseenter',
function(){
var HTMLArr = $(this).children().html().split(':');
$(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp◤</p>');
$(this).siblings('.SList').slideDown('slow');
})
.on('mouseleave',function(){
var HTMLArr = $(this).children().html().split(':');
$(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp◢</p>');
$(this).siblings('.SList').slideUp('slow');
});
});
The mouseenter works properly, but it is not even entering the code for the mouseleave. Any ideas would be greatly appreciated.
Fiddle

See this: DEMO
$(".MList a").on('mouseenter',
function(){
var HTML = $(this).children('p').html();
$(this).children('p').html(HTML.replace('◢','◤'));
$(this).siblings('.SList').slideDown('slow');
})
.on('mouseleave',function(){
var HTML = $(this).children('p').html();
$(this).children('p').html(HTML.replace('◤','◢'));
$(this).siblings('.SList').slideUp('slow');
});

You have an issue with the anchor of the event.
Change to use this:
$(".MList a").on('mouseenter', function () {
var myP = $(this).children('p');
var HTMLArr = myP.text().split(':');
myP.html( HTMLArr[0] + ':&nbsp◤');
$(this).next('.SList').slideDown('slow');
}).on('mouseleave', function () {
var myP = $(this).children('p');
var HTMLArr = myP.text().split(':');
myP.html( HTMLArr[0] + ':&nbsp◢');
$(this).next('.SList').slideUp('slow');
});
You have the same issue with click, and redo same thing. SO, rework and reuse: (you could even make it better but this shows the start of that)
$(".MList a").on('mouseenter', function () {
down($(this).find('p').eq(0));
}).on('mouseleave', function () {
up($(this).find('p').eq(0));
});
$(".MList a").click(function () {
if ($(this).siblings('.SList').is(':visible')) {
up($(this).find('p').eq(0));
} else {
down($(this).find('p').eq(0));
}
});
function up(me) {
var HTMLArr = me.text().split(':');
me.html(HTMLArr[0] + ':&nbsp◢');
me.parent().next('.SList').slideUp('slow');
}
function down(me) {
var HTMLArr = me.text().split(':');
me.html(HTMLArr[0] + ':&nbsp◤');
me.parent().next('.SList').slideDown('slow');
}

disable link after innitial click and enable when ajax-request is finished?

Clicking several times on the link run several ajax-requests. That is why it is hang browser will and is run code js bad. how can to disable link after innitial click and enable when ajax-request is finished?
With respect
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});

change link to # after clicking
$("#link").click(function(){
var href = $(this).attr('href');
$(this).attr('href', '#');
var $this = $(this);
$('.results').load(url, function(){
$this.attr('href', href);
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
});
});
return it after ajax is done

well you could hide it and show it back after the call has finished:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
//hide it
$(id).hide();
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
//show it
$(id).show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});

Simply make the link disabled:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
// disable the link
$(id).removeAttr("href");
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
});
// enable the link again
$(id).attr("href", url);
});

$('a#YourLinkId').click(function() {
// Your ajax code
return false; // Disable the link
});

Develop Reference

JavaScript is the programming language of the Web.

javascript rotate what to change - javascript

If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page. If so, I believe this will work: $(document).click(function(e){ if(!$(e.target).hasClass('arrow')) $(".arrow").attr("src", select_arrow.png) });

Related

jQuery menu in need of additional functionality

jquery show hide each div onclick

Getting the next image and previous image from an gallery

JQuery .hover / .on('mouseleave') not functioning properly

disable link after innitial click and enable when ajax-request is finished?

Categories

Resources