How to hide particular A element inside DIV - html

I have the following HTML
<div class="divclass">
<a id="some_random_id_which_changes_everytime" class="otherclass" title="View Site">View Site</a>
</div>
I want to set display:none for this element "View Site". I tried the following codes but they didn't work. Please note I don't want to hide this whole div but just this particular A element inside it.
Code 1
.divClass [text='View Site']
{
display:none;
}
Code 2
.divClass a[text='View Site']
{
display:none;
}

Try the below.
div.divclass a[title="View Site"]
{
display:none;
}
WORKING DEMO
Alternatively, you can also declare values for a[title="View Site"] to hide without keeping the div inheritance.
For Instance,
a[title="View Site"]
{
display:none;
}
WORKING DEMO - 2
If you want to compare the difference, you can check the below demo.
WORKING DEMO - FOR COMPARISON BETWEEN MULTIPLE TITLES

Another way to hide using jquery ...
<div class="divclass">
<a id="site" class="otherclass" title="View Site">View Site</a>
</div>
and js ..
$('#site').hide();
Working Example

use this
.otherclass
{
display:none;
}
or
.divclass a.otherclass
{
display:none;
}

What Nathan said, or:
div.divclass a[title="View Site"]
{
visibility:hidden;
}
This version will hide what you need but still take up space

use the "child" selector:
<!doctype html>
<html>
<head>
<title>
Bla!
</title>
<style type='text/css'>
div.divclass >a {display:none} /* any a that is direct child of div class divclass */
</style>
</head>
<body>
<div class="divclass">
data inside div before link
<a id="some_random_id_which_changes_everytime" class="otherclass" title="View Site">View Site</a>
data inside div after link
</div>
</body>
</html>

Related

CSS add pointer style only if a div has text

In the following situation, how can add cursor:pointer to only the second div which contains the text Cursor pointer required here.
The div with class="x95qze" remains the same. The div or text within it is added/removed using javascript.
cursor:pointer is required only when there is plain text inside div class="x95qze
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>
CSS:
.x95qze {
border:1px solid black;
padding:5px;
}
.x95qze .RiYDI {
border:1px solid black;
width:50%
}
Try this:
HTML
<div class="x95qze"><span id="js-output">Cursor pointer required here.</span></div>
CSS
#js-output {
cursor:pointer;
display:inline-block;
}
if you know the text you can use pure javascript includes
First find the text
const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// expected output: "The word "fox" is in the sentence"
if (sentence.includes(word)) {
let element = document.querySelector('.x95qze);
element.setAttribute("style", "cursor:pointer;");
}
more info MDN
Jquery has a text selector called :contains(text).
After updating content, i call a function which iterates over .x95qze classed tags and adds cursored class to tags those has no children.
And in css for cursored class I add a rule of cursor:pointer.
function checkCursors(){
$('.x95qze:contains(Cursor)').each(function(i, container) {
$(container).toggleClass('cursored', $(container).children().length == 0);
});
}
// After content updated
checkCursors();
.x95qze.cursored { cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>

different page different color

Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.

HTML target - first click ON THE DIV and after open the second div

The sitemap of my page, I set it to click and show a second div (for more infos) when I preview the second div is already open and with the click closes and opens accordingly, I want the first time to display it, to be closed.
(The following example does not work, I do not know why, on m preview web it's ok)
<script>
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
</script>
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
`tthe first time to display it closed
You can add this code to the top of your script to hide it when the page opens.
$(".sitemapfooter").hide();
The best way is to use CSS as this will hide the element before the jQuery runs rather than once the DOM has loaded.
CSS
.sitemapfooter {
display: none;
}
Just set the inline style of the element to display: none, and then it will default to hidden on page load.
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
Just add display: none to the sitemapfooter div, it will be hidden at startup.
.sitemapfooter {
display: none;
}
If I understand your question correctly you want the second div hidden by default.
In order to make that happen you have to change your css code targeting the class "sitemapline2" and add a display style of none.
This will cause the div with the class "sitemapline2" not to show in the beginning, and when you click the jquery function will run to change the css style to display:block showing your info div.

putting header and image inline in html

I am trying to put the following class:
<div class="title1">
<img src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
in one line by using the following line in the css file:
.title1{display: inline}
but i still get them in two different lines.
How can I change it to be inline?
To display you image and text inline, you have to change their individual display properties; changing the parent's is not enough. The image by default will display inline, but the <h5> displays as a block by default, which means it always takes up the full width so it displays on its own line. If you change the <h5> to display inline, it will display next to the image. Like:
.title1 h5 {
display: inline;
}
Your css applies to your main div "title1" however, you want this to apply to its children. You can test this css :
.title1 > img, .title1 > h5 { display:inline; }
<div class="title1">
<img src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
However be sure to know that with inline display, you won't be able to set size as easy as inline-block.
The display property specifies the type of box used for an HTML element. I don't think is the right thing for your job. Try :
<div>
<img id = "img" src="themes/images/logo.png" alt="logo"/>
<h5>Name</h5>
</div>
And css : #img {float: left;}
Just try this,
<!DOCTYPE html>
<html>
<head>
<style>
h2{display:inline-block}
img{display:inline-block}
</style>
</head>
<body>
<h5>The New</h5>
<img src="themes/images/logo.png" />
</body>
</html>
if not work let me know

Clicking link inside div 2 should hide outer-div 1

I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>