I want to be able to click on div.square-1 and have it toggle with div.square-2
The div itself needs to act like a button, I don't want an external button to activate the toggle like they did on jQuery documentation
Here is a sample of my code.
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
What is the best way to achieve this?
When you click on div.square-1 it will get content of div.square-2
var content1 = $('.square-1').html();
var content2 = $('.square-2').html();
var content = 1;
$('.square-1').click(function() {
if (content == 1) {
$(this).html(content2);
content = 2;
} else {
$(this).html(content1);
content = 1;
}
});
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
HI now try to this way
.html()
first of you save your square-1 div content than replace your content your square-2 div
$(document).ready(function(){
$('.square-1').on('click', function(){
var thisText = $(this).find('h1').text();
$('.square-2 h1').html(thisText);
});
});
.square-box {
width: 100px;
height: 100px;
}
.square-1 {
background-color: blue;
}
.square-2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
Have a look at this, it may be the best suited method.
Related
I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
I have different a-tags which gets generated dynamically. Each link will generate an own div with different contents so each div has an individual content as well as an individual height.
Now I would like to achieve that when hovering an a the matching div will be shown. The div then should be shown at the mouse position and should be position from bottom to top direction so that the div is "growing in upward direction" because the links are on the bottomside of the page.
Here is what the code is look like ($z is a counter):
<a href="<?php echo $link_djv;?>" class="rsshover" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>">
<?php echo $description_djv;?>
</div>
I read already through different threads but wasn't able to find a proper way on how to solve this issue. Thanks in advance.
Run Snippet
This is a basic version of what you need. obviously the animation needs work but should give you a good starting point.
class ToolTipControl {
constructor () {
this.xCoordinate;
this.yCoordinate;
this.links = document.querySelectorAll('a');
this.addEventListeners();
this.activeLink = false;
}
addEventListeners () {
for (let link of this.links) {
link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
}
document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
}
handleMouseMove (event) {
this.xCoordinate = event.pageX;
this.yCoordinate = event.pageY;
if (this.activeLink) {
this.activeLink.style.top = `${this.yCoordinate}px`;
this.activeLink.style.left = `${this.xCoordinate}px`;
}
}
handleMouseEnter (event) {
this.activeLink = event.target.nextElementSibling;
this.activeLink.style.maxHeight = '50px';
}
handleMouseLeave (event) {
let targetsContent = event.target.nextElementSibling;
targetsContent.style.maxHeight = 0;
this.activeLink = false;
}
}
new ToolTipControl();
.preview {
position: absolute;
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease;
}
li {
list-style: none;
}
a {
padding: 20px;
margin: 20px;
color: white;
display: block;
background-color: grey;
width: 100px;
}
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 3
</div>
You're going to need to add a mouse over event of your link and then a javascript function to show your div in the right location. Then you'll need a mouseout even to hide the div again.
what I would start with is change your php code to be:
<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>" style="display:none;">
<?php echo $description_djv;?>
</div>
Then add a javascript function:
<script>
function showDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'block';
// this is where you'd position your div location
}
function hideDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'none';
}
</script>
You can use CSS by putting the div.preview inside the a.rsshover
.rsshover .preview {
display: none;
}
.rsshover:hover .preview {
display: block;
}
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">1</p>
</li>
<div class="preview">
ONE
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">2</p>
</li>
<div class="preview">
TWO
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">3</p>
</li>
<div class="preview">
THREE
</div>
</a>
I don't understand how exactly do you want your preview to be displayed, but this should help you.
(function($) {
var $currentElement;
$('.rsshover').on('mouseenter', function(e) {
$currentElement = $('#djvd_' + $(this).attr('id').substr(5));
$currentElement.css({
position: 'absolute',
display: 'block',
top: e.clientY + 'px',
left: e.clientX + 'px'
});
}).on('mouseleave', function() {
$currentElement.hide()
})
})(jQuery)
.preview {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="rsshover" id="djvl_1" target="_blank">
<li>
<p class="headline">Headline</p>
</li>
</a>
<div class="preview" id="djvd_1">
Description 1
</div>
Also, please don't put <li> tags inside anchor <a>.
I am trying to make the code shared on this fiddle to work on Wordpress but the Javascript doesn't work. I do not have other js file besides the one above.
It works on the example but not on Wordpress.
$(function() {
$('ul.eevmonths a').on('click', function() {
$month = $(this).attr('class'),
$('.eevcontent-' + $month).siblings().addClass('eevhide');
$('.eevcontent-' + $month).removeClass('eevhide');
});
});
a {
text-decoration: underline;
cursor: pointer;
color: blue;
}
.eevhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
<ul class="eevmonths">
<li><a class="jan">1</a></li>
<li><a class="feb">2</a></li>
<li><a class="mar">3</a></li>
</ul>
</div>
<div id="eevcontent">
<div class="eevdefault-text">Default Text</div>
<div class="eevcontent-jan eevhide">
<h3>Januar</h3>
</div>
<div class="eevcontent-feb eevhide">
<h3>Februar</h3>
</div>
<div class="eevcontent-mar eevhide">
<h3>März</h3>
</div>
</div>
You most include jQuery in your HTML-file, like below with a script-tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function(){
$('ul.eevmonths a').on('click', function () {
$month = $(this).attr('class'),
$('.eevcontent-'+$month).siblings().addClass('eevhide');
$('.eevcontent-'+$month).removeClass('eevhide');
});
});
a{
text-decoration:underline;
cursor:pointer;
color: blue;
}
.eevhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
<ul class="eevmonths">
<li><a class="jan">1</a></li>
<li><a class="feb">2</a></li>
<li><a class="mar">3</a></li>
</ul>
</div>
<div id="eevcontent">
<div class="eevdefault-text">Default Text</div>
<div class="eevcontent-jan eevhide">
<h3>Januar</h3>
</div>
<div class="eevcontent-feb eevhide">
<h3>Februar</h3>
</div>
<div class="eevcontent-mar eevhide">
<h3>März</h3>
</div>
</div>
I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve
All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>
As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});
I am working on a site which has only one page, instead of loading different pages for different bits of content; I want the content to change but not the page therefore decreasing loading and creating a nice effect.
As you can see from my code below it's long but it works, I am sure there is a much easier way to do it and animating between the divs.
http://jsfiddle.net/ssLY3/
HTML
<ul class="side-nav" id="sideNav">
<li id="homeNav">Home</li>
<li id="bioNav">Biography</li>
<li id="musicNav">Music</li>
<li id="photosNav">Photos</li>
<li id="shopNav">Shop</li>
</ul>
<div id="homePage">
<p>HOME PAGE</p>
</div>
<div id="biogPage">
<p>BIOG PAGE</p>
</div>
<div id="musicPage">
<p>MUSIC PAGE</p>
</div>
<div id="photosPage">
<p>PHOTOS PAGE</p>
</div>
<div id="shopPage">
<p>SHOP PAGE</p>
</div>
JS
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
$('#homeNav').click(function () {
$('#homePage').show();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#bioNav').click(function () {
$('#homePage').hide();
$('#biogPage').show();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#musicNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').show();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#photosNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').show();
$('#shopPage').hide();
});
$('#shopNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').show();
});
Try to wrap all of your divs inside a parent div:
<div id="wrapper">
<div id="homePage"><p>HOME PAGE</p></div>
<div id="biogPage"><p>BIOG PAGE</p></div>
<div id="musicPage"><p>MUSIC PAGE</p></div>
<div id="photosPage"><p>PHOTOS PAGE</p></div>
<div id="shopPage"><p>SHOP PAGE</p></div>
</div>
Then you can take advantage of the index of your list to show according div element:
$(document).ready(function(){
$('#biogPage, #musicPage, #photosPage, #shopPage').hide();
$(".side-nav li").each(function(i) {
$(this).click(function() {
$("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
});
});
});
Updated Fiddle
html
<a class="link" title="div1" href="#">link1</a>
<a class="link" title="div2" href="#">link2</a>
<a class="link" title="div3" href="#">link3</a>
<a class="link" title="div4" href="#">link4</a>
<div class="clearfix">
<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<div id="div4" class="box">div4</div>
</div>
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
html .clearfix {
height: 1%;
}
.box {
display: block;
padding: 25px;
background-color: #ccc;
border: 1px solid #333;
float: left;
margin-right: 5px;
}
Minimized javascript
(function() {
$('.link').click(function(e) {
$('.box').hide();
$('#' + $(this).attr('title')).show();
e.preventDefault();
});
})();
i think this javascript is probably the most minimal one
check this jsfiddle
http://jsfiddle.net/bqBaA/
vote up if u like this
Another way that changes your HTML as little as possible:
HTML:
<ul class="side-nav" id="sideNav">
<li>Home</li>
<li>Blog</li>
<li>Music</li>
</ul>
<div id="home" class="page"><p>HOME PAGE</p></div>
<div id="blog" class="page"><p>BLOG PAGE</p></div>
<div id="music" class="page"><p>MUSIC PAGE</p></div>
Javascript:
$(document).ready(function(){
var hideall = function() {
$(".page").each(function() {
$(this).hide();
});
};
hideall();
$(".side-nav li a").each(function() {
$(this).click(function() {
var ta = $(this).text().toLowerCase();
hideall();
$("#"+ta).show();
});
});
});