Jquery animate opacity and margin on other element - javascript

I have an link that when clicked, has to show 2 other links.
But when I click my link, nothing happends. Really nothing.
I have loaded in jquery before I have my script.
This is my jquery script:
$("#imd").toggle(function(){
$("#anw").animate({opacity:1},200);
$("#3d").animate({marginTop:75}, 200);
},function(){
$("#anw").animate({opacity:0},200);
$("#3d").animate({marginTop:0}, 200);
});
This is my CSS:
#anw {
width: 50%;
background-color: #0f0;
opacity: 0;
}
And this is my HTML markup
<div class="mid">
<h1>Interactive Media Design</h1>
<div id="anw"><br><a class="left" href="website.html">Apps</a><a class="right" href="website.html">Websites</a></div>
<hr>
<h1 id="3d"><a href="#">3D Modelling</h1>
</div>
<div class="bottom">
<h1>Contact and about me</h1>
</div>
My apologies if this is a very dumb question, but I have no clue.. Also the documentation I can find is not filling my needs.

You need to work with a click handler:
$("#imd").click(function(){
$("#anw").toggle(function(){
$(this).animate({opacity:1},200);
}, function() {
$(this).animate({opacity:0},200);
});
$("#3d").toggle(function() {
$(this).animate({marginTop:75}, 200);
},function() {
$(this).animate({marginTop:0}, 200);
})
});
See the Fiddle: https://jsfiddle.net/8Lpvty1w/

Working fiddle for what you want to do: https://jsfiddle.net/rr9Lvjgh/
Essentially:
$("#imd").on('click', function(){
// code to change stuff here
});

Related

JQuery animation to lengthen container not working

I want to make the length of one of my divs longer on a button click, however the jquery doesn't seem to be working. Here's the script.
<script type="text/javascript">
$(document).ready(function(){
function extendContainer() {
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
}
})
</script>
Here's the html, with the code for the button
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
And here's the css just in case.
#one .container {
width: 50em;
height: 22em; /* Height of the #one section*/
}
You shouldn't need the onclick="extendContainer()" attribute, or the function itself for this to work, as you are attaching the handler rather than performing the action when you call extendContainer():
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
},
300);
});
})
and
<div id="div1" id="buttons">
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
</div>
Should be enough
I guess you want this :
function extendContainer() {
$('#one .container').animate({
height: "200px"
},
300);
}
And of course, add the relevant HTML in your code to make the animation works :
<div id="div1" id="buttons" >
<ul class="actions">
<li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
</ul>
<div id="one">
<div class="container">test</div>
</div>
</div>
Besides, you can choose between the click() event in jQuery and the onclick on the input but both in same time are useless.
It's not working because the onlick method is only applying a listener, not calling the method you want. Anyway, you can remove the onclick attribute (and by the way, you have two of them, I don't understand why) from the input element, and use only this:
$(document).ready(function(){
$('#thisisabutton').click(function() {
$('#one').animate({
height: "200px"
}, 300);
});
});
This should work. Also you're applying this to an element (with id "one" - #one) that I don't see in you HTML code, so you have to create it too.

Limit hover action to it's specfic children only jQuery 2.1.3

I'm trying to limit the hover action to it's specific child element.
i.e.
when I hover over Image Here, only 1 million Team and wordpress should appear and when I hover over Image Here # 1, only 2 million Team and wordpress should appear.
see link
jQuery 2.1.3
jQuery('doucment').ready(function () {
jQuery('.b29_work_img').hover(function () {
jQuery('.b29_work_hover').css({
opacity: 0.8
});
}, function () {
jQuery('.b29_work_hover').css({opacity: 0});
});
});
HTML
<!-- our work -->
<div id="b29_our_work">
<div class="b29_container">
<div class="b29_row">
<div class="b29_col b29_col_3 b29_work">
<div class="b29_row">
<div class="b29_col b29_col_3 b29_work_img">
<h1>Image HERE</h1>
<div class="b29_work_hover">
<h4>1 Million Teams</h4>
<h5>Wordpress</h5>
</div>
</div>
<div class="b29_col b29_col_3 b29_work_img">
<h1>Image HERE # 1</h1>
<div class="b29_work_hover">
<h4>2 Million Teams</h4>
<h5>Wordpress 4.3</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.b29_work_hover {
opacity:0;
}
You need to change your selector:
jQuery('.b29_work_hover', this)
or you can use .find() method:
jQuery(this).find('.b29_work_hover')
What is the issue?
jQuery('doucment') should be jQuery(document)
You are targeting all of the elements with .b29_work_hover class name.
You have not given the context of the selector which is this.
Note:
All the class selector in js like document.getElementsByClassName("className") or a library like jQuery $(".className") always returns a list of all the elements available on the page.
Replace this:
jQuery('.b29_work_img').hover(function () {
jQuery('.b29_work_hover').css({
opacity: 0.8
});
}, function () {
jQuery('.b29_work_hover').css({opacity: 0});
});
by this:
jQuery('.b29_work_img').hover(function () {
jQuery(this).find(".b29_work_hover").css({
opacity: 0.8
});
}, function () {
jQuery(this).find(".b29_work_hover").css({opacity: 0});
});
Here is the JSFiddle demo
Basically you use this and find to find the element under the currently hovered element and change the opacity.
jQuery('.b29_work_img:first').hover(function () {
jQuery(".b29_work_hover:first").css({
opacity: 0
});
jQuery(".b29_work_hover:last").css({
opacity: 0.8
});
});
jQuery('.b29_work_img:last').hover(function () {
jQuery(".b29_work_hover:first").css({
opacity: 0.8
});
jQuery(".b29_work_hover:last").css({
opacity: 0
});
});
Here is the answer, I think you want to see that when you hover over one image, it's parent element should appear.
jQuery('doucment').ready(function () {
jQuery('.b29_work_img').hover(
function () {
jQuery(this).children('.b29_work_hover').css({
opacity: 0.8
});
},
function () {
jQuery(this).children('.b29_work_hover').css({opacity: 0});
});
});

Scrolling div horizontally

How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle

JQuery Minimize & Maximize HTML Div

Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>

Fading one div into another

I'm having some slight problems with fading one div into another, here's my code (and test page):
HTML:
<div id="grid">
<div class="grid-box">
<div class="phase-1">
<img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
<div class="grid-heading">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4>Probeything 2000</h4>
<p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
</div>
<div class="grid-heading-hover">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".phase-2").hide();
});
$(function(){
$('.grid-box').hover(
function(){
$('.grid-box .phase-1').fadeOut(200, function(){
$('.grid-box .phase-2').fadeIn(200);
});
},
function(){
$('.grid-box .phase-2').fadeOut(200, function(){
$('.grid-box .phase-1').fadeIn(200);
});
}
);
});
</script>
CSS:
.phase-1 .grid-image {
width:210px;
height:220px;
overflow:hidden;
}
.phase-2 {
position:relative;
top:-220px;
}
UPDATE:
I have one "working" (see test link in question). Is it possible to stop it fading to white then fading in the next phase? I want to fade the two div into each other rather than to white first.
If you type $ on the console, it answer undefined, so it probably was redefined by some other script. To use $ meaning jQuery again, use the following syntax
$(document).ready(function($) {
// $ means jQuery again in here
});
Notice the $ as the first argument of the function call.
Documentation here.

Categories