Jquery this concatenation - javascript

first off i am a beginer in coding so please bear with me. i have several images on a page forming a navigation bar that will be animated. i am trying to move an element based on what element is moused over. all the images have unique ids and share common names, ie the names for the home icons are "home" and "homeShad". the idea is when you mouse over home, homeShad will move and being as i have several links im trying to slim my code down. this has led me to here and what im trying to do
$.reset = function() {
$(this + 'Shad').animate({
left: '+=100'}, 300)
$('#home').mouseenter(function() {
$.reset
})
this doesnt work so i tried this
$.reset = function() {
$('#'+ $(this).attr("id")+" shad").animate({
left: '+=100'}, 300)
and still no joy.
('#home').click(function() {
alert('#'+ this.id + 'shad')
})
this managed to get the alert to show "#homeShad" exactly what im looking for when i tried to animate it there was no joy
hopeing some one can help and i am sorry if i made any mistakes in posting here

Check out this fiddle: http://jsfiddle.net/eVDe3/
Hope this answers your question!
Your code should have been:
$('#home').click(function() {
$('#'+this.id+'Shad').animate({
left: '+=100'
},300);
});
EDIT: If you want to call it by a function, you have to pass $(this).id. Check this updated fiddle here: http://jsfiddle.net/eVDe3/1/
Here's the corresponding code:
function reset(id) {
$('#'+id+'Shad').animate({
left: '+=100'
},300);
}
$('#home').click(function() {
reset($(this).attr('id'));
});

I see that you have set the "homeShad" id for the icon, but you used "shad" at points you have mentioned.
I don't know you are aware of that or not, but ids and classes are case-sensitive,
so you should write like below:
$.reset = function() {
$('#'+ $(this).attr("id")+" Shad").animate({
left: '+=100'}, 300)
};

Related

Use an if else function to resize content using javascript

I'm new to the website so I apologize if I'm doing something wrong here.
Alright so here is my problem. I have 3 div next to each others. One of them is a menu, the second is a player and the third a chat box.
The set up is the following. When I open the menu to display the submenu, the player slides out to the right pushing the chat box under the player.
I thought of using javascript to resize the chat box size whenever the menu is triggered.
This is what I have so far :
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").css({"width": "30%"});
});
});
And it works!
The problem is when I close the sub menu and the player slides back to its original position, the chat box does not resize to its original size.
I feel like I need to use the if else function but I can't figure out the code.
Could you help me with the function please?
THIS IS THE WHOLE CODE : https://codepen.io/LAMUUZ/pen/JJrodY
Edit:
You can create a class having width 30%
.tempWidth {
width: 30% !important
}
Then use toggleClass on container and pass in the class.
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").toggleClass("tempWidth");
});
});
Did you try using toggle instead of click ?
you could use an if else statement and it might not be a bad exercise for you to use. in that case you should set a variable like on the intial click and then change that variable around...
Something like this
var makeDivSmall = true;
$(".zocial-youtube").click(function(){
if(makeDivSmall){
$(".container").css({"width": "30%"});
makeDivSmall = false;
}
else{
$(".container").css({"width": "100%"});
makeDivSmall = true;
}
});
You can also accomplish it with only one if statement like this:
$(document).ready( function(){
$('.zocial-youtube').click( function() {
var toggleWidth = "100%"
if($(".container").css("width") == "100%"){
toggleWidth = "30%"
}
$('.container').animate({ width: toggleWidth });
});
});
Also jquery has a method called toggle which can be convenient for things like this. The basic implementation just toggles an element visible state.
By the way you speak about sliding so maybe you want to put a slide effect when the width changes rather just snapping it to 30% ? have a look here
$( "container" ).animate({
width: "30%"
}, 1500 );

Animate children of a div that have been created within a function (with js or jquery)

I'm taking a coding class at school and am very new to javascript, so hopefully what I'm asking will make sense!
Right now I have a page where if you click an html button, an image of a worm appears in a div below it (called "bugs"). the same image appears each time you click the button. I've done this by having the button click call a function that creates an img element and adds it as a child of the div. the issue is I want the images to move randomly around the page or even just inside the div. I've found some code that will animate a div so it moves randomly using jQuery (here), but I can't for the life of me figure out how to apply it to the images.
The js code that makes the images looks like this:
var BugSpace = document.getElementById("bugs");
function NewWorm(){
WormPic = document.createElement("img");
WormPic.src = "worm.png";
BugSpace.appendChild(WormPic);
};
Most of my code is pieced together from various tutorials so is likely pretty convoluted. anyway, if anyone can figure this out I'll be eternally grateful :~)
Edit: I suppose I should further clarify that the code includes two other buttons to make two other types of bugs! I'd like to be able to have a few images of each bug moving on the page at once. I figure the best way to do this is to find a way to animate the children of the "bug" div? I am, however, wondering if the answer to my problem might turn out to be a complete reworking of the code I have now!
If you're comfortable using jQuery, then you can use the following solution.
You basically still animate the div and because the img is contained within the div, it will animate too.
All you need to do is call the animateDiv() function after you've added the image.
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.html($wormimg);
animateDiv();
});
});
The animateDiv() function here is exactly the same as the link you've provided.
Have a look at the jsfiddle: http://jsfiddle.net/3xgqogkk/
EDIT (based on more information from the comments)
So the new core javascript looks like:
$(document).ready(function(){
$button = $('#button');
$bug = $('#bug');
$wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";
$button.on('click', function(){
$bug.append($wormimg); //Changed this to append so we can add more than 1
animateDiv($bug.children().last());
//We're basically passing the last worm you've added as a variable
});
});
Which means you have to make some modifications to the animateDiv() method, which is now actually animateDiv($worm)
function animateDiv($worm){
var newq = makeNewPosition();
var oldq = $worm.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$worm.animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv($worm);
});
};
The important thing is to understand everything that's happening here, so if you have any questions, just ask :)
The jsfiddle is also updated: http://jsfiddle.net/3xgqogkk/

Jquery - Trying to hide and show bunch of images

I'm having slight problem with my jquery code. I'm new to Jquery, so please help me improve my code. Well I'm trying to hide and show this 4 images. Let me elaborate it a bit:
I created this 4 images (put side by side)
When one clicked it should expand and hides the other
When the expanded click it should return to its normal dimension and shows the other
Then it should be repeated
My code seems to work on the first go, but it messes up on the second run (the images doesn't behave like what i envision them to behave)
Here is my code:
http://codepen.io/sallyiee/pen/onkKs
You can simplify your code with toggleClass and toggle metods:
$(".showcase" ).on("click", "img", function(e) {
$(this).toggleClass("expand");
$(this).siblings().toggle("fast");
});
Demo: http://codepen.io/anon/pen/mlBEI
Try
$(".showcase img" ).click(function(e) {
if( $(this).hasClass('expand')) {
$(this).removeClass("expand").addClass("normal").show("fast");
$(this).siblings().show("fast");
} else {
$(this).addClass("expand").removeClass("normal");
$(this).siblings().hide("fast");
}
});
http://codepen.io/tamilcselvan/pen/HpbiK

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

Ajax Load in jquery when hit a link from the menu

I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)

Categories

Resources