How to make two div clickable by using one click? - javascript

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

Related

How to addClass and remove Class when clicking a link?

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

autoload a href="#" with javascript

How can I autoload the #menu of the first two jsplayers so that it opens onload of the page?
Tecnically I need to auto load this
<div class="sm2-button-bd">
menu
</div>
Thanks
You can use like this:
window.location.hash = 'menu';
Try
window.onload=function() {
document.querySelector(".sm2-inline-button menu").click();
}
jQuery:
$(function() {
$(".sm2-inline-button menu").first().click();
});

Changing a image for another after clicking on it with jquery

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');
});

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);

How do I make this code work for each click?

I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})
If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>​
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});​
Example
I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}
Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.
Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}
$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.
It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.

Categories

Resources