I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
I have a navbar that contains three elements. Horizontally, from left-to-right, they are: socialMediaIcons, logoArea, and navBarOptionsList.
I wrote javascript and CSS such that, when the user begins to scroll down the page, the socialMediaIcons and navBarOptionsList's visibility change to hidden.
The problem is, the socialMediaIcons element lags by about half a second to become hidden after the user scrolls down. The navBarOptionsList hides immediately after even slightly scrolling down the page (this is the expected behaviour -- and it is what I'd like the socialMediaIcons to do too).
Below is the CSS (which is where I suspect the problem is), as well as the Javascript (detailing the logic for hiding the two elements) and HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS, and stupid fontawesome shyt -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Required CDNs: jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="../resources/codigoinitiativefavi.ico"/>
<!--Custom CSS Stylesheet-->
<link rel="stylesheet" href="../styles.css"/>
<title>Codigo Initiative</title>
</head>
<body>
<nav class="navBar">
<div class="socialMediaNavBarArea">
<ul class="socialMediaIconList">
<li class="socialMediaIcon"><i class="fab fa-facebook-f"></i></li>
<li class="socialMediaIcon"><i class="fab fa-twitter"></i></li>
<li class="socialMediaIcon"><i class="fab fa-youtube"></i></li>
<li class="socialMediaIcon"><i class="fab fa-github"></i></li>
<li class="socialMediaIcon"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="logoArea">
<img id="navBarLogocaster" src="../resources/codigoinitiativewhite.png" alt="Codigo Initiative">
</div>
<!--TODO: Nav bar options list font style should match the Codigo Initiative logo font style-->
<div class="navBarOptionsAreaFullScreen">
<ul class="navbarOptionsList">
<li class="navItem">
<a class="navLink" href="">Home</a>
</li>
<li class="navItem">
<a class="navLink" href="">Resources</a>
</li>
<li class="navItem">
<a class="navLink" href="">Curriculums</a>
</li>
<li class="navItem">
<a class="navLink" href="">Contact</a>
</li>
</ul>
</div>
<div class="hamIconNavOptions">
<ul class="hamIconNavOptionsList">
<li class="hamburgerIconNavOptions">☰
<ul id="hamburgerIconNavOptionsNestedList">
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Home</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Resources</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Curriculums</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="placeholder"></div>
</body>
<footer>
<script src="../index.js"></script>
</footer>
</html>
CSS:
/*Hamburger Icon styling*/
.hamburgerIconNavOptions{
color: white;
padding-top: 20px;
}
/*Styling for the hamburger icon (which is really a list)*/
.hamIconNavOptionsList{
margin: 0;
padding: 0;
list-style: none; /*removing the bullet point*/
}
/*styling the nested list in the hamburger icon*/
#hamburgerIconNavOptionsNestedList{
margin: 0;
padding: 0;
list-style: none; /*Removiing the bullet points*/
background-color: #13204f;
opacity: .5; /*Making this bad boy transparent. (0 is completely transperent, 9 is solid black)*/
}
/*Removing the default underlining provided by the anchor tag's default styling*/
.navOptionAnchorItem{
text-decoration: none; /*Removing the default styling from the anchor element*/
color: white;
}
/*Removing the underlining of links provided by the anchor tag's default styling*/
.navOptionAnchorItem:link {
text-decoration: none;
}
/*Removing the underlining that occurs by default on anchor tags when hovering over them.*/
.navOptionAnchorItem:hover {
text-decoration: none;
}
/*Styling each list item within the hamburger icon's nested list*/
.hamburgerIconNavOptions{
float: left;
width: 200px;
height: 40px;
}
#media(max-width: 1200px) {
/*This logic will execute when the screen's width becomes too small to display everything*/
.socialMediaIconList{
display: none; /*Will hide the list items when the screen's width is too small to display them*/
}
.socialMediaIconList.toggleCls{
display: none; /*will remove the social media icon list if the screen isn't wide enough to display it*/
}
.hamburgerIconSocialMedia {
display: none; /*TODO: Don't really need a hamburger bar to begin with. Need to come back and remove this.*/
}
/*Same stuff as above, except for the navBar options list*/
.navbarOptionsList{
display: none;
}
#hamburgerIconNavOptionsNestedList.toggleCls{
display: block;
}
/*The screen is too small. But hide the nested list that belons to the hamburger icon. Will be displayed when the hamburger icon is clicked.*/
#hamburgerIconNavOptionsNestedList{
display: none;
}
}
/*Make the hamburger icon disappear when the screen is large enough to display all list view items*/
#media(min-width: 1199px) {
.hamIconNavOptions{
display: none; /*Hides the hamburger icon when the screen is large enough to display everything*/
}
.socialMediaIconList{
display: initial; /*Shows the social media links*/
}
.navbarOptionsList{
display: initial;
}
}
.navBar {
display: flex;
flex-direction: row; /*Aligns items horizontally*/
flex-wrap: nowrap; /*Prevents overflow wrapping. We'd rather everything get packed on a single row.*/
padding: 10px;
background-color: #13204f;
height: 125px;
position: fixed;
width: 100%;
}
.socialMediaNavBarArea {
position: relative;
width: 25%;
padding: 30px 0;
text-align: center;
}
.logoArea {
position: relative;
width: 50%;
text-align: center;
}
.navBarOptionsAreaFullScreen {
position: relative;
width: 30%;
padding: 30px 0;
text-align: center;
font-size: 15px;
padding-right: 30px;
}
/*Social Media area*/
.socialMediaIcon {
list-style: none;
margin: auto;
display: inline-block;
font-size: 10px;
padding: 10px 10px;
color: white;
border: 1px solid white;
border-radius: 50%;
transition: .5s;
}
.socialMediaIconList {
padding-left: 0px;
padding-right: 90px;
}
.socialMediaNavBarIcons {
top: 40%;
left: 50%;
transform: translate(-53%, -50%);
position: absolute;
}
.socialMediaIcon:hover {
color: #565759;
border: 1px solid #565759;
transition: .75s;
}
/*Navigation Bar logo area*/
#navBarLogocaster {
max-width: 100%;
max-height: 75%;
/*Aligns the image center horizontal and vertical*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Navigation Bar options area*/
.navItem {
display: inline;
}
.placeholder {
height: 5000px;
}
.navLink {
padding: 5px;
color: white;
}
.navLink:hover {
text-decoration: none;
color: #565759;
transition: .75s;
}
Javascript:
/**
* The following logic controls what will happen when the user scrolls down on the screen.
* The navbar will decrease in heigh slightly.
*/
window.onscroll = function() {configureNavBar()};
function configureNavBar() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
//The user is scrolling down, so minimize the nav bar, and hide all corollary navbar items to reduce clutter.
document.querySelector(".navBar").style.height = "90px";
hideSocialMediaIcons();
hideNavBarOptions();
} else {
//The user has scrolled back up to the top. Display all corollary navbar options/details.
document.querySelector(".navBar").style.height = "120px";
unhideSocialMediaIcons();
unhideNavBarOptions();
}
}
/**
* Will hide the social media icons (if it is even being displayed at all)
*/
function hideSocialMediaIcons() {
let socialMediaIconList = document.querySelector(".socialMediaIconList");
//If the social media icons are being displayed, hide them.
if(socialMediaIconList.style.visibility != "hidden") {
socialMediaIconList.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
/**
* Will hide the navbar's (full-screen) options when scrolling down.
*/
function hideNavBarOptions(){
let navBarOptions = document.querySelector(".navbarOptionsList");
//If the social media icons are being displayed, hide them.
if(navBarOptions.style.visibility != "hidden") {
navBarOptions.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
Because there is transition duration set for socialMediaIcon class but for .navBarOptionsList no duration set.
I trying to do something which I think will be simple but I can't seem to get anywhere. I have a small navigation bar with a couple of links then an area of text. What I want to happen is when I click on a click the paragraph of text will change to the link it relates to.
I have tried the following among many things (forgive me I haven't used JQuery or javascript in quite a while) It doesn't appear to do anything whatsoever!
I am open to looking at new ways of achieving the desired effect.
var ptext;
$(document).ready(function(){
ptext = $("#pchange");
$(".one").click(function(){
ptext.html("text1");
});
$(".two").click(function(){
ptext.html("tex2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="#">EMEAR</a></li>
<li><a class="two" href="#">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
you can either remove the href from the a tag or add event.preventDefault() so that the link is no longer working like it should.
also if you only want to change the text content of an element use .text()and not .html()
var ptext;
$(document).ready(function() {
ptext = $("#pchange");
$(".one").click(function(event) {
event.preventDefault();
ptext.text("text1");
});
$(".two").click(function(event) {
event.preventDefault();
ptext.html("tex2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px;
/* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
/* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="#">EMEAR</a></li>
<li><a class="two" href="#">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
can you add the href="javascript:void(0)" or event.preventDefault() or event.preventDefault(); event.stopPropagation(); you can choose any one.
your script changes the HTML but its work .html() or .text() but .text() is the best beacuse text is mean the inner text html means the others element.
first, you click the nav ul li a button and just get this text and change your target element text.
Work fine...
Thank you
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var ptext;
$(document).ready(function(){
ptext = $("#pchange");
$("nav ul li a").click(function(event){
ptext.html($(this).text());
});
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: white;
}
/* Style the header */
header {
background-color: #2B547E;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #43BFC7;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #2B3856;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<header>
<h2>Voice of the Theatre</h2>
<img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px">
</header>
<section>
<nav>
<ul>
<li><a class="one" href="javascript:void(0)">EMEAR</a></li>
<li><a class="two" href="javascript:void(0)">AMER</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<div id="pchange">
</div>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
<h1>America</h1>
<ul>
<li>Update 1 </li>
<li>Update 2</li>
<li>Update 3</li>
</ul>
</article>
</section>
<footer>
<p></p>
</footer>
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly