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();
});
});
Related
This is my li element. I want to get only the value of class 'preview' when clicking on the li element using jquery.
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
Output should be: john#gmail.com
I tried below code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $('.preview').val($(this).text());
})
Am getting the entire li items click event list as output.
Please help on this. Thanks.
You'd want to attach the click event handler to each list node, then a few ways could find the child nodes text value, one approach would be using the event.target to get access to the clicked list node, or my approach would be iterating over the list node collection as the following example illustrates.
const theLinkContains = email => document.querySelector('h2 span').textContent = email;
(() =>
{
document.querySelectorAll('li.contact')
.forEach(link =>
{
link.addEventListener('click', () =>
{
theLinkContains(link.querySelector('.preview').textContent);
});
});
})();
ul {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
li {
position: relative;
display: block;
padding-left: 5px;
margin-bottom: -1px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .125);
}
.preview {
display: none;
}
<h2>Result: <span></span></h2>
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">Bob</p>
<p class="preview">Bob#gmail.com</p>
</div>
</div>
</li>
</ul>
The issue in your code is using .val() which is wrong to have it here, what you need is to select the <li> tag and then perform .find() to get the child .preview and then get its text using .text()
This is what you should have in your code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $(this).find('.preview').text();
console.log(data);
})
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>
You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".
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>
Ok, so I've tried looking at everything on here and many people have suggested adding a width or a height or even using jquery css to hide elements, but nothing is working for me.
I am trying to have 3 elements slideDown when the user scrolls to a specific section of the page. The problem is that the 3 elements flash on the screen for a brief moment then slide down. How do I remove the brief flash?
$('#e1, #e2, #e3').hide();
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 400) {
$('#e1').slideDown(1500);
$('#e2').slideDown(2000);
$('#e3').slideDown(2500);
}
});
DIV#customContent DIV.customObj {
float: left;
width: 406px;
}
DIV#customContent DIV.customObj DIV {
display: none;
margin: 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="customContent">
<div class="customObj">
<h3>Service</h3>
<div id="e1">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Modernization</h3>
<div id="e2">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Lift Solutions</h3>
<div id="e3">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
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();
});
});
});