How can I make a button change its position after being clicked like this demo here but instead of the active parameter I would like it to be at margin-left:50px; definitely after clicked
HTML
<div class="button">
<button type="fb-like">Fb-Like</button>
</div>
CSS
.button:active {
margin-left:50px;
}
/* But with a on clicked parameter instead of active */
You need to use JavaScript:
var d = document.getElementById("button");
d.addEventListener('click',function(){
d.className = d.className + " move";
});
Demo: http://jsfiddle.net/LJHQW/3/
Or, if you're already using jQuery:
$('.button').click(function(){
$(this).addClass('move');
});
Demo: http://jsfiddle.net/LJHQW/1/
Here's a simple solution:
http://jsfiddle.net/LJHQW/2/
JavaScript:
/* Toggles the style class on click */
$("button").click(function() {
$(".button").toggleClass("buttonLeft");
});
CSS:
.buttonLeft {margin-left:50px;} /* But with a on clicked parameter instead of active */
Related
This my js code:
i want to click first button to call a new class,it works but, every
button doing same work. when i click second button this also calling
a new class.please help me to solve this.
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
this my html code:
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.
<button id ='myBtn' >first</button><br>
$("#myBtn").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
You can use contains('first').
The thing is that your using button as selector, that will not understand which button is clicked actually.
I would recommend, To make jQuery understand you should provide any specific id to that element.
But if you want to do it based on the text inside a DIV, you can use contains('first').
$(document).ready(function(){
$("button:contains('first')").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
$(document).ready(function() {
$("button").eq(0).click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>first</button>
<br>
<button>second</button>
<br>
<button>third</button>
<br>
<div class="new" style="display: none;">hi.</div>
<!--i need to call only this class-->
<div class="old">hello.
</div>
use .eq() to select which button you need the click
Note: eq() is index based which starts with 0
With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:
<button id="firstBtn">first</button><br>
<button id="secondBtn">second</button><br>
<button id="thirdbtn">third</button><br>
And then call them with the id selector # like so: $("#firstBtn").click()..
Remove the inline style and use a separate css class
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggleClass('hide'); /*new class calling */
});
});
CSS
.hide {
display:none;
}
JSFIDDLE
If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
if ($(this).text() == "first" ) $(".new").toggle(); /*new class calling */
});
});
</script>
set id is the better
<button id="first">first</button><br>
<button>second</button><br>
<button>third</button><br>
<script>
$(document).ready(function(){
$("#first").click(function(){ /*specific button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
give id's to the buttons, n call those accordingly like
$("#first").click(function(){
$(".new").toggle();
});
I have two div and I want to open these two div in new tab by using one click.
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
Something like this should do that
$('a').on('click', function(e) {
e.preventDefault();
$('a').each(function() {
window.open(this.href, '_blank');
});
});
Here's a demonstration using a button
Add 'target=_blank' to in <a> tag .
This is Google.</div>
This is YouTube.</div>
Use javascript for both
<script>
$('#googel,#youtube').click(function()
{
// your commands...
})
</script>
Without javascript, it's not possible to open two links in two different tabs on one click. So my suggestion is to wrap those divs in a parent div and do some javascript.
var wrapper = document.getElementById('wrapper');
wrapper.onclick = function(){
window.open('http://google.com', '_blank');
window.open('http://youtube.com', '_blank');
};
#wrapper{
cursor: pointer;
}
#wrapper:hover{
background-color: #0ff;
}
<div id="wrapper">
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
</div>
As you can try this:
$("#google, #youtube").click("Do your work");
For more:
Reference-1 & Reference-2
I have the following script in my page to close out a dropdown submenu when the close button is clicked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".closebutton").click(function() {
clearTimeout();
var c = $(this).closest("li");
c.find(".dropdown").css("left", "-9999px")
});
});
</script>
Once the "close button" is pressed, the dropdown no longer appears again when I hover over the parent li since the css has been changed to "left: -9999px". What script should I add that returns the css to "left: 0px;" again when I hover once more on the parent li without reloading the page?
Thanks!
This finds the closest li to the close button, and when its hovered finds the .dropdown element and sets the .dropdown to left: 0.
$('.closebutton').closest('li').hover(function() {
$(this).find('.dropdown').css('left', '0px');
});
You could use the $.mouseover() event and change the left property back to 0px. It would look something like this:
'<script type="text/javascript">
$(function() {
$(".closebutton").mouseover(function() {
var d = $(this).closest("li");
d.find(".dropdown").css("left", "0px");
});
});
</script>'
Hope that helps!
Try using the .show() and .hide() events in jQuery rather than changing the css and the .hover() to execute the .show().
c.find(".dropdown").hide();
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(
Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/
To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});
take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});
You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});