I am using Jquery to make click events. It is simple when I am changing css properties, but one of my elements I am trying to change (a canvas) the size in HTML.
I am trying to access and change this html code on a click - width and height:
<canvas id="testCanvas" width="755" height="500" > </canvas>
with this jquery
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$getElementById('testCanvas').animate({width="200"}, 250);
})
Is this the best way to go about it? if so, could I please have some advice with the syntax to make it work? I am getting an error of unexpected = sign
Thanks a lot
Fetch element using id selector in jquery,
document.getElementById('testCanvas') is equivalent to $('#testCanvas')
and the correct syntax for .animate() is like:
$('#testCanvas').animate({width:"200"}, 250);
Make sure your click events are when the document is ready. Also document.getElementById isn't used in JQuery. This works:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').attr("width", "200");
});
});
If you want it to be a smooth animation simply change it to this:
$(document).ready(function() {
$('#flipthehood').click(function(){
console.log('hood flipped clicked');
$('#testCanvas').animate({width: "200"}, 250);
});
});
$.animate uses a colon instead of an equals sign.
To change an element attribute with jQuery use the .attr() method:
$("#testCanvas).attr("width", 200)
Related
Link: https://jsfiddle.net/nbonne/9hcoy9j8/
I aim is to have the medium blue box and everything in it move up when the search button is pressed.
I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.
I think this is the correct way to accomplish it but nothing happens:
$("#search-btn").click(function{
$("controls-main").animate({
background: "red"
}, 500);
})
In the fiddle:
Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.
Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/
$(document).ready(function() {
$(".rand-wiki").click(function() {
window.open("https://en.wikipedia.org/wiki/Special:Random");
});
$(".s-form").on('click', function () {
$("[name=search]").animate({
marginTop: '40px'
}, 500);
});
});
jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.
I am a genuine javascript novice and looking some pointers in my learning - not homework nor is it anything commercial.
I have a function here which shows an element which is hidden due to the first 2 lines of the function. I start by clicking the heading and the 2 hidden divs appear, which is exactly what I wanted to happen. However, now when I use this second function, it won't return to it's windown onload state. Why is this? Is there a better way to achieve this?
1st Function
$(window).ready(function(){
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
$(".heading").click(function(){
$('.miniC').slideDown();
$('.miniI').slideDown();
$('.miniC').show();
$('.miniI').show();
});
});
2nd Function (Reverse)
$(window).ready(function(){
$(".hideOut").click(function(){
$('.miniC').slideUp();
$('.miniI').slideUp();
$('.miniC').hide();
$('.miniI').hide();
});
});
Thanks in advance and any reference to good reading material is appreciated.
* Corrected Missing closing quote - this was a mistake of me typing it into Stack Overflow - Sorry! *
It seems like you want to toggle the visibility of an element, and since you're already sliding it, why not just use slideToggle:
$(".miniC").css("display", "none");
$(".miniI").css("display", "none");
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Example
You shouldn't need to call .hide() and .show() - they will be dealt with as part of the slide functions. However, you're calling them immediately after the slide, but that takes a while to complete (400ms by default) meaning that .hide() fires before .slideUp() completes.
Outside the question scope, but still applicable.
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
This part of the page functionality should probably in CSS, which will result in the browser rendering the initial paint of the page correctly. In your case the browser paints the "miniC" and "miniI" elements, then your jQuery code updates the CSS display property to "none" for both individually. Triggering two additional repaints of the page. So, basically with the jQuery code you are drawing the page three times for an effect that could achieved with a single paint.
Then like Charlie said add a listener for the click.
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Because slideUp() and hide() are written inside the click event. So, it wont fire on window ready, but only onclick of $(".hideOut").
There is a typo in your first function.
a single quote is missing in the line:
$('.miniC).show();
I have a sprite image than when mouseenter/mouseleave occurs over it, the background position changes.This is working so far although there is probably a more efficient way of doing it. However I have several images I need to do this with and am trying to find a way to feed the id of the image into the jQuery rather than duplicate code.
The HTML:
<div class='featSmallBox' id='featSmallImg2'>
</div>
The image source is placed using CSS.
This is what I have so far for the jQuery.
$("#featSmallImg2").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("#featSmallImg2").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Ideally I need to feed in the id of what is being mouseentered dynamically, but everything I've tried doesn't seem to work.
Apologies if this makes little to no sense. I'm new to both jQuery and this site.
If the jQuery code is the same for all divs containing the sprites, try changing $("#featSmallImg2") in your jQuery to $(".featSmallBox"). This way, all your divs with the class .featSmallBox will have this feature.
Check with event.target
$( "body" ).mouseenter(function( event ) {
console.log( "mouseentered id: " + event.target.id);
});
$("div[id^='featSmallImg']").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("div[id^='featSmallImg']").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Try this code. Event will be called for all div's whose id starts with 'featSmallImg'
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/
I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example
I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().
You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});
LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);