b1 hides the image while b2 doesn't show it. Also the toggle function does not work? What is wrong in my code?
$(document).ready(function() {
$(".b1").click(function() {
$("img").hide();
});
$(".b2").click(function() {
$("img").show();
});
});
Without the code it is impossible to give the right answer . If I assume that everything is good with the HTML and CSS , I would do something like this :
$(document).ready(function() {
var imgOne = $(".b1");
var imageTwo = $(".b2");
var imgClass = $(".img-class");
imgOne.on("click",function() {
imgClass.hide();
});
imageTwo.on("click",function() {
imgClass.show();
});
});
You can also add console.log('pass') when you click to see if the functions are even doing something . Like this :
$(document).ready(function() {
var imgOne = $(".b1");
var imageTwo = $(".b2");
var imgClass = $(".img-class");
imgOne.on("click",function() {
console.log('pass hide');
imgClass.hide();
});
imageTwo.on("click",function() {
console.log('pass show');
imgClass.show();
});
});
You should see these prints in the console if everything works ok .
Try it out . Hope this helps :)
Related
I want to drag my whole view, but there is something wrong with what i'm doing :
paper.view.onMouseDrag = function drag(event)
{
alert("ee");
}
It's doesn't work, the propertie onMouseDrag contain the function drag, but this console.log never show up. And then when i do a things like this it work :
self.deplacerFond = new paper.Tool();
self.deplacerFond.onMouseDrag = dragDeplacerFond;
function dragDeplacerFond(event) {
console.log("test");
}
self.eventsSouris.deplacerFond.activate();
I tried this aslo :
var test = function(event) {
alert("test");
};
view.on('mousedrag', test);
I'm a bit confuse, do i have to active the 'paper.view.onMouseDrag' too ?
(sorry for my poor english)
try
paper.view.addEventListener('mousedown',function(e){
alert("mousedown");
});
for mouse move
paper.view.addEventListener('mousemove',function(e){
alert("move");
});
I was successful in getting the id of all images within a div when clicking the div with the following codes below:
<script type="text/javascript">
function getimgid(){
var elems = [].slice.call( document.getElementById("card") );
elems.forEach( function( elem ){
elem.onclick = function(){
var arr = [], imgs = [].slice.call( elem.getElementsByTagName("img") );
if(imgs.length){
imgs.forEach( function( img ){
var attrID = img.id;
arr.push(attrID);
alert(arr);
});
} else {
alert("No images found.");
}
};
});
}
</script>
The codes above works perfectly, doing an alert message of the image id when clicking card div. Now what I want is to run this function without clicking the div in every 5 seconds. I have tried setInterval (getimgid, 5000), but it doesn't work. Which part of the codes above should I modify to call the function without clicking the div. Any help would be much appreciated.
JSFiddle
You should be calling it this way:
setInterval (function(){
getimgid();
},5000);
also remove binding of click event for element.
Working Fiddle
Use elem.click() to trigger click
function getimgid() {
var elems = [].slice.call(document.getElementsByClassName("card"));
elems.forEach(function (elem) {
elem.onclick = function () {
var arr = [],
imgs = [].slice.call(elem.getElementsByTagName("img"));
if (imgs.length) {
imgs.forEach(function (img) {
var attrID = img.id;
arr.push(attrID);
alert(arr);
});
} else {
alert("No images found.");
}
};
elem.click();
});
}
setInterval(getimgid, 1000);
DEMO
Problem: You are not triggering the click in setInterval. You are only re-running the event binding every 5 secs.
Solution: Set Interval on another function which triggers the click. Or remove the click binding altogether if you don't want to manually click at all.
Updated fiddle: http://jsfiddle.net/abhitalks/3Dx4w/5/
JS:
var t;
function trigger() {
var elems = [].slice.call(document.getElementsByClassName("card"));
elems.forEach(function (elem) {
elem.onclick();
});
}
t = setInterval(trigger, 5000);
I want to loop my click events, to make the code shorter. I might have 30 of these values later on.
My working code
$(document).ready(function () {
var last_click = '';
$("#title").click(function() { last_click = 'title'; });
$("#subtitle").click(function() { last_click = 'subtitle'; });
$("#test").click(function() { last_click = 'test'; });
});
This is how I want it (not working)
My guess is that the each-loop runs on dom ready and then never again and that way the click-event can never be triggered?
$(document).ready(function () {
var last_click = '';
var contents = new Array();
contents = ['title', 'subtitle', 'test'];
$.each(contents , function(index, value){
$("#" + value).click(function() { last_click = value; });
});
});
If there is not solved like I would, I would be thankful for a nice workaround.
I would rather add a class to all elements you want to bind this to, eg class="last-click"
and define the binding once as:
$(".last-click").on('click', function() {
last_click = this.id;
}
If you really wanted to make it shorter, give them all a similar class.
$(document).ready(function () {
var last_click = '';
$(".theclass").click(function() {
last_click = this.id;
});
});
if you have value attribute for your buttons or elements, you can do it:
$(document).ready(function() {
var last_click = '';
$("input").click(function() {
last_click = $(this).attr('value');
alert(last_click);
});
});
I assumed that you are using "input type="button". Also here is the demo you can see it in action: http://jsfiddle.net/rS2Gb/5/
Hi All I am trying to write both an if/else statement along with toggling an image. Basically my goal is to toggle an image (in this case with an id of soundonoff). However I can't seem to figure out where I am going wrong. The issue is the toggle works, but the detect of whether its muted or not does not work. (In my full code for example I have it switch innerHTML of various audio/video files, this is where document.getElementsByName('mymedia')[0] comes in. Any help would be tremendously appreciated I have spent about 4 hours working on this and can't seem to figure it out.
I should add that I do not know where to add an eventlistener for detectmute(), I tried to add it to my video, and to the button soundonoff but neither got working yet.
Here is my code:
function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}
Well I solved my own issue, Solution was the following:
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff');
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
$("#soundonoff").attr('name', 'soundon');
});
function detectmute(){
var soundstate = document.getElementById('soundonoff');
if (soundstate.name == "soundon")
{
document.getElementsByName('mymedia')[0].muted = false;
}
else if (soundstate.name == "soundoff")
{
document.getElementsByName('mymedia')[0].muted = true;
}
}
$('#soundonoff').on('click', function () {
var $this = $(this);
if ($this.attr('src') == 'images/icons/soundon.png') {
$this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
} else {
$this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
}
});
Here is a demo: http://jsfiddle.net/jLvZW/3/ updated
You could also setup an object that converts one source to another:
var convert = {
'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
};
$('#soundonoff').on('click', function () {
var $this = $(this);
$this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});
Here is a demo: http://jsfiddle.net/jLvZW/2/ Updated
I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
So yesterday my friend discovered how this could be done ... the problem was that the plugin converts images into canvas anyway her's the code :
$(document).ready(function(){
$('.pic').each(function(){
this.onmouseout = function(){
var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
canvas1.onmouseover = function(){
Pixastic.revert(this);
}
}
this.onload = function(){
var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
canvas.onmouseover = function(){
Pixastic.revert(this);
}
}
});
});
Try doing this
$('.photography').live('mouseenter', function(event){
Pixastic.revert(this);
}).live('mouseleave', function(event){
Pixastic.process(this, "blurfast", {amount:0.5});
});