Hello i am using jquery to animate a box on the left to slide right to show the facebook link , the box slides fine but the text inside seems not to be affected by the jquery function , my code is :
JQUERY
$(document).ready(function () {
$("#social").mouseenter(function () {
$("#social").animate({
width: 50
});
});
$("#social").mouseleave(function () {
$("#social").animate({
width: 20
});
});
});
HTML
<div id="social">test</div>
The problem is whith the a href , it doesnt animate with the div , i tried to give the a href an id , still didnt work
Try with e.preventdefault()
$("#social").mouseenter(function () {
e.preventdefault();
$("#social").animate({
width: 50
});
});
You need to make sure that your div has a specified width for it to animate, for example:
#social {
width: 20px;
}
Fiddle Demo
Not sure if this is what you want, but if you want the <a> to expand along with the <div>, just add a display: inline-block; and width: 100%; in your css:
#social a {
display: inline-block;
width: 100%;
}
Fiddle demo
Thank you guys i found the solution , i need to change the marginLeft so that it looks like the whole thing box with link was a bit hidden then shows
$(document).ready(function(){
$("#social").mouseenter(function(){
$("#social").animate({width:80});
$("#social").animate({marginLeft:'0px'});
});
$("#social").mouseleave(function(){
$("#social").animate({width:40});
$("#social").animate({marginLeft:'-10px'});
});
});
Related
I have a parent <div>, #amwcontentwrapper, which has a series of divs within it with their own classes and ids.
I want to use jQuery to select these child divs, and IF they have the class .amwhidden, do nothing, but if not, remove the .amwshown class and add the .amwhidden class.
This is what I have so far, but it is not working. I think it may be my selecting of the child divs within the parent.
Can anybody see any obvious problems? Thanks for your help.
if ($('#amwcontentwrapper > div').hasClass('amwhidden')){
} else {
$('#amwcontentwrapper > div').fadeIn(600, function(){
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
And here is the basic html that I am using:
<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>
UPDATE: Using War10ck's solution in the comments below (i.e. $('#amwcontentwrapper > div.amwshown')) I have managed to get the classes changing as I wished. However, those which have had the .amwshown class removed and .amwhidden class added still show on the page, despite the CSS looking like this:
.amwhidden {
display:none;
}
.amwshown {
display:block;
}
Looking at the Dev Tools, it seems that, when the jQuery is run (on a click event) the classes are changing, but any classes which are having the .amwshown class added (thus displaying them on the page) are also having the a <style> tag added to them which makes them display:block;
When I then press another button, which should hide the aformentioned <div> to make way for another one, the class is being changed to .amwhidden, but that <style> tag is not being deleted, so even though it has the .amwhidden class, it is still on the page.
I've created a JSFiddle here, if anybody still wants to help!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>
`
You can use not to remove the elements you do not want, like this:
$('#amwcontentwrapper > div').not('.amwhidden')
.removeClass('amwshown')
.addClass('amwhidden');
And work with that.
Try this
$(document).ready(function() {
$("#amwcontentwrapper").children().each(function(elem, x) {
if ($(x).attr("class") == "amwhidden") {
alert($(x).attr("class"));
$(x).removeClass("amwhidden").addClass("amwshow");
alert($(x).attr("class"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="amwcontentwrapper">
<div class="amwhidden"></div>
<div></div>
<div></div>
</div>
You can try each as follow,
$("#amwcontentwrapper div").each(function(){
if($(this).hasClass('amwhidden'))
//DO something
else
//DO something
});
Thank you for all help, it has prompted some brainstorming which has solved this issue.
Instead of adding the .amwhidden class and removing the .amwhidden class using jQuery, I have just created a .amwsection class, which all the sections belong to which has an initial display value of none. So far, so good; all of the sections are not there when you load up the page.
Then I use the .css jQuery function to change the display:none to display:block when the corresponding button is clicked, and changing all other .amwsections to display:none. This works just fine, but the effect is quite abrupt; there is no fading in, as you would get if you used the .animate function. .animate, however, does not work with the display value.
.fadeOut and .fadeIn to the rescue! By wrapping the .css change in these, I can create a fading in/out effect and can still use the display value.
Here is one example of this code.
The #buybutton is the button to be pressed.
#amwintro is just something which appears when the page loads - it will now be set to display:none if this is the first button pressed.
The .amwsection are all of the hidden sections. This portion of the code just resets all of them. This and the #amwintro section happen very quickly (1/100th of a second) to keep response time good.
The #amwbuy is the specific section that I want to reveal. As you can see, this fades in over a longer period.
Currently only tested in Chrome, but I think I've got it!
$(document).ready(function () {
$('#buybutton').click(function() {
$('#amwintro').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('.amwsection').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('#amwbuy').fadeIn(600, function() {
$(this).css({
display:'block',
});
});
});
});
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
I'm trying to add a hidden sidebar on my website. This is what exactly what I want to achieve: http://demo.themebeans.com/pinto/ but I wanted it to show in hover instead of click. just instead of a click... just want my visitors to just hover on it.
Here's what I have so far. I want it to be positioned the same with the sample I've given above. :( Can someone help?
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
Contents of the sidebar like the one on my sample.
</div>
http://jsfiddle.net/yztJ8/ here's the fiddle.
You need to set the absolute positioning correctly:
#nav { position: absolute; top: 0px; right: 0px; }
Just change left: 0; to right: 0; - here is the updated fiddle: http://jsfiddle.net/yGBkV/
I strongly recommend you use the hoverIntent plugin - the user experience will improve a lot:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Here is a mix of pure JS and jQuery.
(function() {
var oNav = document.getElementById('nav');
oNav.addEventListener('hover', function() {
$('#nav').fadeIn();
}, false);
})();
This probably should work.
simply try
$('#nav1').bind("mouseenter", function() {
$('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
$('#nav').animate({width:'0px'},500);
});
jsfiddle: http://jsfiddle.net/yztJ8/5/
There are few divs. I need to change the border radius of them with click event. i have managed to change the border radius only once. When someone click on a div, the border radous should be changed to 50%, And click on the same div again, applied border radius should remove.
And while there is a border changed div and if click on another div border of the changed div should remove and border radius should applied to clicked div. Which means there must be only one border radius applied div at a time.
I have this code
jsfiddle
HTML
<div></div>
<div></div>
<div></div>
<div></div>
ANd this css
div {
width: 100px;
height: 100px;
background: #000;
margin: 10px;
float: left;
}
also this jquery code
$('div').each(function(){
$(this).click(function(){
$(this).css('border-radius', '50%');
});
});
help me please, on this.. i have no idea about how to do this..
Use a class for that:
DEMO
$('div').click(function(){
if($(this).is('.radius')){$(this).removeClass('radius'); return;}
$(this).addClass('radius').siblings().removeClass('radius');
});
div.radius {
border-radius:50%
}
You may want to provide more divs than this. So you should user a class to select them.
I've updated your code and give you this function:
$('div.radius').each(function(){
$(this).click(function(){
$('div.radius').css('border-radius','0');
$(this).css('border-radius', '50%');
});
});
http://jsfiddle.net/C23a2/1/
I have updated your code adding CSS classes: http://jsfiddle.net/Hq6TQ/7/
div.round-border {
border-radius: 50%;
}
and adding it using jQuery:
$(this).addClass("round-border");
P.S. you don't need to iterate over each div element and bind events, you can just use the following snippet:
$('div').click(function(){
// do whatever you need here
});
UPDATE: so far here is what you've initially asked for, I didn't read your question well.
$('div').toggle(function(){
$(this).css('border-radius', '50%');
});
First, you don't need to do each for a click event. Just use click directly. Then:
$('div').click(function(){
$(this).css('border-radius', $(this).css('border-radius') == '50%' ? '0px' : '50%');
});
A (better) alternative would be to use toggleClass() like some people here suggested.
JQUERY:
$('div').click(function () {
$('div').removeClass('radius')
$(this).addClass('radius');
});
CSS:
div.radius {
border-radius:50%
}
DEMO
Try this, working good.
$('div').each(function () {
$(this).click(function () {
if ($(this).css("border-radius") == "0px") {
$(this).css('border-radius', '50%');
} else {
$(this).css('border-radius', '0');
}
});
});
JSFIDDLE