So right now I have a section that has 3 tabs on it. Each tab is supposed to bring up a different table while simultaneously hiding the other 2 tables. When the page loads up it shows the first table (which it is supposed to do), but when I click one of the other two tabs nothing happens. I realize this has to be done with a Javascript onclick but I'm not familiar with it yet to know what I'm doing. I unfortunately have a lot of code that goes into making this work so i wont be able to post it on here but ill grab the code i think is most important and if you need any more info let me know. Please and thankyou for your help.
The tabs are "Pavement Section Editor", "Traffic", and "Condition"
HTML:
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Pavement Section Grid
</h2>
<p><div id="table_div_Main"></div></p>
</section>
#foreach (var layer in lstLayers)
{
if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
{
<section id="#("tab" + layer.Replace(" ", ""))" class="tabSection">
<h2 class="medium" style="font-size: 12px;">#layer</h2>
<p><div id="#("table_div_" + layer.Replace(" ", ""))"></div></p>
</section>
}
}
</article>
</div>
</div>
JAVASCRIPT:
function drawSectionData(data) {
return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};
function drawTrafficData(data) {
return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};
function drawConditionData(data) {
return drawMe(data, 'Condition Data', 'table_div_Condition');
};
//what i got so far on the javascript
$(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })
The best way to implement tabs in your scenatio is to use jQuery Tabs - very easy and almost no additional coding required, and as added benfit it is free
Based on the assumption that:
You want to hide only the content that sits within the p of each
section and not hide the whole section itself because that would
mean that your click-able h2 will also become invisible.
You have removed div from within your section and are only using p
because inline elements do not allow to contain a block (in your
case, a div) element inside it. [Link], [Link] & [Link].
Your JavaScript code then may look like this:
var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
tabSections.find('p').hide(); // hide all p elements found within tabSections
$(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
});
Snippet:
var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
tabSections.find('p').hide();
$(this).siblings('p').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Main
</h2>
<p id="table_div_Main">Pavement Data</p>
</section>
<section class="tabSection" id="tabTraffic">
<h2 class="medium" style="font-size: 12px;">
Traffic
</h2>
<p id="table_div_Traffic">Traffic Data</p>
</section>
<section class="tabSection" id="tabCondition">
<h2 class="medium" style="font-size: 12px;">
Condition
</h2>
<p id="table_div_Condition">Condition Data</p>
</section>
</article>
</div>
</div>
Hope this helps.
Related
I'm a beginner web developer learning front end development. Recently I was working on a project from front end mentor, It has a functionality which, if the name of a tab is clicked the content will be updated. I tried, But it's not working.
<section class="features">
<div>
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites.
Your bookmarks sync between your devices so you can access them on the go.</p>
</div>
</section>
<section id="allTabs" class="allTabs">
<div class="btn-container">
<button class="tab-btn active" id="tab1">Simple Bookmarking</button>
<button class="tab-btn" id="tab2">Speedy Searching</button>
<button class="tab-btn" id="tab3">Easy Sharing</button>
</div>
<div class="tab active" id="tab1">
<img class="tab-img" src="./images/illustration-features-tab-1.svg" alt="">
<article>
<h3 class="tab-title">Bookmark in one click</h3>
<p class="tab-text">Organize your bookmarks however you like. Our simple drag-and-drop interface
gives you complete control over how you manage your favourite sites.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
<div class="tab" id="tab2">
<img class="tab-img" src="./images/illustration-features-tab-2.svg" alt="">
<article>
<h3 class="tab-title">Intelligent search</h3>
<p class="tab-text">Our powerful search feature will help you find saved sites in no time at all.
No need to trawl through all of your bookmarks.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
<div class="tab" id="tab3">
<img class="tab-img" src="./images/illustration-features-tab-3.svg" alt="">
<article>
<h3 class="tab-title">Share your bookmarks</h3>
<p class="tab-text">Easily share your bookmarks and collections with others. Create a shareable
link that you can send at the click of a button.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
</section>
.tab {
display: none;
}
.tab-btn.active {
border-bottom: 3px solid hsl(0, 94%, 66%);
}
.tab.active {
display: flex;
margin-left: 4.2rem;
margin-right: 4.2rem;
}
const allTabs = document.querySelector(".allTabs");
const btnsAll = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".tab");
allTabs.addEventListener("click", function (e) {
const id = e.target.dataset.id;
if (id) {
// remove active from other buttons
btnsAll.forEach(function (btn) {
btn.classList.remove("active");
e.target.classList.add("active");
});
// hide other all articles
articles.forEach(function (article) {
article.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
});
This is the code. Can anyone fix this.This CSS code adds styles to the active tabs and their corresponding articles. When a tab is clicked, the .active class is added to both the .tab-btn button and the .tab article, which triggers the styles specified in this CSS code.
The styles included in this code are:
border-bottom: 3px solid hsl(0, 94%, 66%);: Adds a colored bottom border to the active tab button to indicate which tab is currently selected.
margin-left: 4.2rem; margin-right: 4.2rem; display: flex;: Adds some margin to the left and right of the active tab article, and sets its display to flex to allow for more flexible positioning.
display: block; justify-content: left;: Sets the display to block for the active article and aligns its content to the left.
text-align: left; display: block; margin-top: 6rem; padding-left: 3rem;: Adds some margin and padding to the left of the active article's title and aligns it to the left.
text-align: left; padding-left: 1.4rem;: Aligns the active article's text to the left and adds some padding to its left.
display: block; margin-left: 3rem; margin-top: 2rem;: Positions the "More Info" button for the active article by adding some margin to its left and top.
This is a piece of HTML code that defines a section with the id "alltabs" and the class "allTabs". Inside this section, there is a container with three buttons that have the class "tab-btn" and the ids "tab1", "tab2", and "tab3". The first button has the class "active" which indicates it is the default active tab.
Each button represents a feature and when a user clicks on one of them, it activates the corresponding tab, which has the same id as the button. The tab contains an image and an article with a title, a paragraph of text, and a button with the class "tab-btn-more-info".
The purpose of this code is likely to create a user interface for a website or application that allows users to manage their bookmarks by providing features such as one-click bookmarking, intelligent search, and easy sharing. The tab system provides a way to present and switch between different features without cluttering the interface.
The only mistake that you are doing is you are using id instead of data-id on the buttons so it should be
CODESANDBOX DEMO
<div class="btn-container">
// CHANGE data-id instead of id
<button class="tab-btn active" data-id="tab1">Simple Bookmarking</button>
<button class="tab-btn" data-id="tab2">Speedy Searching</button>
<button class="tab-btn" data-id="tab3">Easy Sharing</button>
</div>
I am working on a wordpress costing form but really struggling with the responsive view as ive used text descriptions to explain the products. Is it possible that you know some code where i can put a plus button next to the title of the products. When i press the plus button the small description will show underneath the title.There are multiple products with title and small description. I have done two screenshots to show what i mean How it looks with small description https://pasteboard.co/xNRq4SCqcYpp.png. How i need it to look https://pasteboard.co/20OrgDInhwWa.png.
I presume it would be an if statement to say if lfb_itemBloc contains lfb_itemDes display none and generate a plus icon and only display lfb_itemDes when plus button is clicked.
The code in question is below
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<div data-imagetype="" data-urlvariable="1" data-sentattribute="price" data- variablename="" data-shadowfx="0" data-html="true" class="lfb_selectable" >
<img data-no-lazy="1" data-tint="false" src="https://testing.secureyourticket.com/wp-content/plugins/WP_Estimation_Form/assets/img/placeholder.png" alt="" class="lfb_selectableImg img .png">
<span class="fas fa-times icon_select"></span>
</div>
<p class="lfb_imgTitle ">Google Analytics</p><p class="lfb_itemDes " style="
">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p>
</div>
Thanks in advance
Not so complicated. Among many different ways you may do a variant of the following.
var elmt = document.querySelector(".stg"),
desc = document.querySelector(".desc");
elmt.addEventListener("click", e => desc.style.display = desc.style.display === "block" ? "none" : "block");
.stg {
pointer-events: none;
}
.stg:after {
content: " +";
pointer-events: all;
}
.desc{
content: "Some Description";
display: none;
font-size: 0.67em;
}
<div class="stg">Some context</div>
<div class="desc">Description on the topic</div>
It's pretty straightforward. Assuming the HTML will get written first and you need to do all this after the fact - first insert the icon, then apply a click action. On that we can find the related description through .closest() and .find(). Then you can also toggle the font-awesome icon as well.
let insertExpand = `<span class="fa fa-plus expand-icon"></span>`;
jQuery(function($) {
$('.lfb_itemDes').each(function() {
if ($(this).text().trim() !== '') {
$(insertExpand).insertBefore($(this).closest('.lfb_item').find('.lfb_imgTitle'));
}
})
$('.expand-icon').click(function() {
$(this).closest('.lfb_item').find('.lfb_itemDes').toggle();
if ($(this).hasClass('fa-plus')) $(this).removeClass('fa-plus').addClass('fa-minus');
else $(this).removeClass('fa-minus').addClass('fa-plus');
})
})
.lfb_itemDes {
display: none;
}
.expand-icon {
cursor: pointer;
float: right;
}
.lfb_item {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Google Analytics</p>
<p class="lfb_itemDes" style="
">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p>
</div>
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Something else w/ no description</p>
</div>
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Something else w/ description</p>
<p class="lfb_itemDes" style="
">Blah blah blah.</p>
</div>
first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>
I want to use JQuery to hide text when web page is launched and when you click on an item it will show the hidden text.
When I load the page it shows the text in h2 and the text in h3 and hides the text in ptdeats as expected. When I click on the text containing "Jason O'Reilly", it doesn't show the text "Hi there, my name is Jay......".
The classes trainers ptpics, pt, center are configured in css.
The jquery is also configured to highlight h3 and also when h3 is click it shows the text and when you click on h3 it hides it again.
This is what I have configured in html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
This is the css configuration
.trainers
{
width: 80%;
background-color: #36454F;
color: #FFFFFF;
text-align: justify;
height: auto;
margin-left: 10%;
margin-left: 10%;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.pt
{
width: 100%;
cursor: pointer;
color: #FFFFFF;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.ptpics
{
width: 33%;
background-color: #36454F;
color: #FFFFFF;
border: 1px;
border-color:#009900;
text-align: justify;
height: auto;
float: left;
padding-left: 6px;
padding-right: 6px;
}
JQuery configuration:
$(document).ready(function()
{
$(".me").hide();
$(".pt").click(function(){
$(".me").show();
});
});
It might be a problem with which element the event is triggering on. try:
$(".ptpic").click(function(){
$(".me").show();
});
If that works, then you might not be clicking in the right spot.
Your code should work. I tested it out, and it did work.
Make sure you close the html tabs:
<div class="ptpic center">
<h3 class="pt center">My Name</h3>
<p class="center"><img src="images/me.jpg" alt="Me" width="320" height="350"></p>
<p class="me">Hi there</p>
Make sure you click on the actual text that says "My Name" because if you just click close to it, it might not exactly work. A good way to test it out is to put a background color on the target object (here it's either h3 or .pt) via CSS. Then, clicking anywhere inside that box should be okay!
If you instead wanted the text to toggle hide and show, then do this into your javascript:
$(document).ready(function(){
$(".me").hide();
$(".pt").click(function(){
$(".me").toggle();
});
});
This will alternate between show and hide every time you chick on the .pt block.
Hope this helps!
Okay, so I copied and pasted your code and made a few changes! These changes should fix them. Let me know if they work.
HTML:
<!--Here I ONLY added the id's into each h3 elements. They should not cause any damage to the code. I will tell you why at the end. -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center" id="h3_1">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_2">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_3">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
JAVASCRIPT:
//I simply modified the classes to put what you wanted it to do. I guess this was simply a class issue then? Because everything seems alright except that.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").show();
});
});
JAVASCRIPT, SUGGESTED:
//This should work better because you want the user to be able to remove that new added text if they want to. Just a minor suggestion. Toggle makes a hidden object to show and a shown object to hide.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").toggle();
});
});
JAVASCRIPT, ADDUP WITH ID'S, ALSO SUGGESTED:
//This is where the ID's come into play.
$(document).ready(function(){
$(".ptdeats").hide();
// console.log(this);
$(".pt").click(function(){
$("#"+this.id).next().next().toggle();
});
});
Explanation: The two first Javascript will show all the texts in all ".ptdeats" when you click on ".pt" because you tell JS to show ".ptdeats". Any HTML with that class will show.
Nevertheless, there's a cool trick in JS where you can find any specific attribute of the specific element that you clicked on. Also, if you're unfamiliar with "this", "this" basically designates the elements that you are on. For example, if you click on <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>, even though you designated it on JS with ".pt", "this" refers specifically to <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>. Try uncommenting the // console.log(this); and check your web console to see what I mean.
Finally, .next() in jQuery designates the very next element. In here it works only because of how you structured your HTML. The first .next() is the p tag with the image in it and the second one is the text you actually want to toggle.
This is better because it will toggle the text specific to the person you are clicking on!
Let me know if this works. I am confident it will: I copied and pasted from what you gave and made only minor changes. I also tested it on four different browsers: Opera, Mozilla, Chrome, and Safari. I don't have IE, so I am not sure how it will behave, but this is nothing too complicated so it should work as expected.
I am new to programming so I apologise if my code presentation is not very good or my explanation not very clear. But, what I am trying to achieve is an auto-scroll feature as the content inside the <span> tag expands, so as you can see the function will print <br> and eventually, my <span> will require scrolling, when that happens, I would like to make it scroll automatically to the bottom of the <span> until the function finishes.
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px"></span></pre>
<script>
function print()
{
for (i = 0; i < n; i++)
{
document.getElementById("code").innerHTML += "<br>";
} // for
} // end-function
</script>
I have looked at similar Stack Overflow questions, and I cannot find a solution to what I am trying to achieve. I have tried the following solutions:
document.getElementById('divID').scrollIntoView();
$(divname / .class / #id).focus();
div = document.getElementById('#your_div');
div.scrollTo(0,div.scrollHeight);
But neither worked for me, though, it may be that I might've implemented it wrong.
My HTML code:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading"><h3 align="center">Pseudo Code</h3></div>
<div class="panel-body" style="height:600px;">
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px">code</span></pre>
</div>
</div>
</div>
</div>
</div>