Change image with jquery - javascript

I want to change image when I click the link. I have code below. First click it is working. But in second click, it is not.
menu_span is "link id"
menu_image is "image id"
$(function() {
$("#menu_span").click( function(){
if(document.getElementById('menu_image').src ="images/arti.jpg")
{
document.getElementById('menu_image').src ="images/eksi.jpg";
}
else
if(document.getElementById('menu_image').src ="images/eksi.jpg")
{
document.getElementById('menu_image').src ="images/arti.jpg";
}
}
);
});
it is working like below. But I dont want to use "i2"
var i2=0;
$("#slider_span").click( function(){
if(i2==0)
{
document.getElementById('slider_image').src ="images/eksi.jpg";
document.getElementById('slider_div').style.display="inline-block";
i2=1;
}
else
if(i2==1)
{
document.getElementById('slider_image').src ="images/arti.jpg";
document.getElementById('slider_div').style.display="none";
i2=0;
}
}
);
please help!

Use ==, not = to check equality :
if (document.getElementById('menu_image').src == "images/arti.jpg") {
document.getElementById('menu_image').src ="images/eksi.jpg";
} else if(document.getElementById('menu_image').src == "images/eksi.jpg") {
document.getElementById('menu_image').src ="images/arti.jpg";
}
But instead of testing the state of the element, you'd better store it in a variable :
$(function() {
var nbchanges = 0;
$("#menu_span").click( function(){
$('#menu_image').prop('src', (nbchanges++)%2 ? "images/arti.jpg" : "images/eksi.jpg");
});
});
Demonstration

You could also use === to avoid type conversion.

Related

Remove option with value = MRW if I checkbox if checked

I'm trying to remove a option with value equal to MRW if #natural_person_lives_in_ccs_0 is checked but if I unchecked the checkbox then the SELECT should be as it was by default meaning same options. This is what I did:
$(document).ready(function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
But it's not working since Option1 is added by default and I don't know how to write this. I think to use .toggle() but don't know if it's the right one. I leave a Plunker here for testing. Any help on this?
Steps:
Check Yes option value=MRW should be removed
Remove the check from Yes option value=MRW as by default (same position)
Try to use the .change() function to accomplish your task here,
$('#natural_person_lives_in_ccs_0').click(function () {
var elem = $(".shipping_from option[value='MRW']");
if (this.checked) {
elem.remove();
} else if (elem.length == 0) {
$(".shipping_from").prepend('<option value="MRW">Option1</option>');
}
});
DEMO
The best way would be,
$('#natural_person_lives_in_ccs_0').click(function () {
$(".shipping_from option[value='MRW']").toggle(!this.checked);
$(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});
DEMO
Write your script like bellow.
var showOptionsAcorrdingCheckbox = function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
}
$(document).ready(function(){
$(':checkbox').change(showOptionsAcorrdingCheckbox);
});
DEMO
code:
$(document).ready(function(){
$(document).on('change', '#natural_person_lives_in_ccs_0', function(){
if($(this).is(':checked'))
{
$(".shipping_from option[value='MRW']").remove();
}
else
{
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
});

Use the same keypress to show a div and hide another, repeatedly, using Javascript

Lets call the 2 divs in question div1 and div2.
What I'm trying to do is use the enter key to show div1 and hide div2 (if div2 is currently visible) and vice-versa. Right now I have the code so that pressing enter will show div1 and hide div2, but to go back to having div2 shown and div1 hidden you have to use the shift key. The way it is now works, but I would like it so I only have to press enter each time I want the divs to alternate.
Here is the javascript code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var keys = [];
var code = [13];
var keys1=[];
var code1 = [16];
$(document).keydown(function(keyEvent) {
keys.push(keyEvent.keyCode);
keys1.push(keyEvent.keyCode);
if ( keys.length > code.length ) {
keys.shift();
}
if ( keys1.length > code1.length ) {
keys1.shift();
}
if ( keys.toString() == code.toString() ) {
showAns();
}
if ( keys1.toString() == code1.toString() ) {
hideAns();
}
});
});
</script>
Any idea how to accomplish what I'm asking?
Try this sample of what you want to achieve:
var toShow = true;
$(document).keydown(function(keyEvent) {
if(keyEvent.keyCode == 13){
$('#div1').toggle(toShow);
$('#div2').toggle(!toShow);
toShow = !toShow;
}
});
I'll give you a nudge in the right direction, but won't supply you the answer outright.
You need to find a way to check the property of your elements visibility ( How do I check if an element is hidden in jQuery? This might help you!), and add that to your conidtion like so:
if(KeyIsPressed && element.IsVisible)
{
HideElement
}
else if(KeyisPressed)
{
ShowElement
}
Without getting too fancy, you can use a 'state' variable to hold that information, and then synchronize that to the DOM:
var state = {
"div1": true,
"div2": false,
};
synchronizeState();
$(document).on("keydown", function(event) {
if(event.which === 13) {
state.div1 = !state.div1;
state.div2 = !state.div2;
synchronizeState();
}
});
function synchronizeState() {
if(state.div1) {
$("#div1").show();
} else {
$("#div1").hide();
}
if(state.div2) {
$("#div2").show();
} else {
$("#div2").hide();
}
}
Working example: http://jsbin.com/eJiPavO/1/

How do I hide and unhide a DIV on my web page based on a checkbox check?

I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));
change ($(this).checked) to ($(this).is(':checked'))
You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');
You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/
is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});
I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/

click multiple elements to hide or show something - jquery

here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK
Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.
If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}

zClip not working

http://jsfiddle.net/w4eL7/1/
its not working in my case because my copy handler the copy id is hidden initially and zClip has a check for hidden element
if (o.is(':visible') && (typeof settings.copy == 'string' || $.isFunction(settings.copy)))
so i removed o.is(':visible') check from it but still its not working, my swf file is placed at right place.
on checking i found that
clip.addEventListener('mouseDown', function (client) {
o.trigger('mousedown');
if(!$.isFunction(settings.copy)){
clip.setText(settings.copy);
} else {
clip.setText(o.triggerHandler('zClip_copy'));
}
if ($.isFunction(settings.beforeCopy)) {
o.trigger('zClip_beforeCopy');
}
});
is not working i mean any thing inside the addeventlistner is not working at all, can anybody either tell me the workaround of doing it or can help me in fixing it
thanks
First remove the display: none; in .rightMenu in the css-file. It will be hidden after the zclip-call which moved to the beginning. I made some more smaller changes (look also at my jsfiddle: http://jsfiddle.net/wV3H8/).
$(document).ready(function() {
var selectedElement = null;
$("#copyChildDivId").zclip({
path: "swf/ZeroClipboard.swf",
copy: function() {
return (selectedElement !== null ? $(selectedElement).attr("id") : "");
},
afterCopy: function() {
$('#rightMenuItem').hide();
}
});
$('.rightMenu').hide();
$(".item").bind("contextmenu", function(e) {
$('#rightMenuItem').css({
top: e.pageY+'px',
left: e.pageX+'px'
}).show();
selectedElement = this;
return false;
});
});

Categories

Resources