The HTML structure of the header is not ideal, but cannot be changed at this time.
Here is the HTML:
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
I'm trying to make it display the div with the class "speakingdropdown" when I hover over the anchor tag with the class "speakingdropbtn"
What CSS or JS or JQuery would I need to use to make that happen? I can post CSS, but there's a ton of it because the whole header is fully responsive.
You can use css adjacent sibling selector +, :hover pseudo class
div.speakingdropdown {
display: none;
}
a.speakingdropbtn:hover + div.speakingdropdown {
display: block;
}
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
$('.speakingdropbtn').hover(function() {
$('.speakingdropdown').show();
},
function() {
$('.speakingdropdown').hide();
});
Without any css styles, this is the most basic implementation. We hide the dropdown and then on hover we use jQueries .show() method.
$(".speakingdropbtn").hover(function(){
$(".speakingdropdown").show()
})
.speakingdropdown {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
About
<a class="speakingdropbtn" href="">Speaking</a>
<div class="speakingdropdown">
Assemblies
Religious
Corporate
</div>
Products
Media
Contact
Blog
</nav>
Related
I would like to remove this footer from my page by specifying only this section to display: none
Eg: "div class="poweredby" display: none" but I'm not sure how to do it...
Here is the Div class I would like to assign the attribute to
<div class="poweredby">
<p class="report">If this site is spam or abuse,
<a id="reportLink" target="_blank" href="https://app.grate.cm/grate/report.html?site=301708&url=https://app.grate.cm/grate/builder/301708#/">report here.</a>
</p>
<p class="poweredby-text">This site was built with SEMTotal.</p>
</div>
Have you tried the following:
<div class="poweredby" style="display: none">
...
</div>
You can either set the attribute directly via style attribute like the code above or within separate .css file like the code below
.poweredby{
display: none;
}
You can also use javascript to hide an element like this:
document.querySelector('.poweredby').style.display = "none";
<style>
.hide{display:none;}
</style>
<div class="poweredby hide">
<p class="report">If this site is spam or abuse,
<a id="reportLink" target="_blank" href="https://app.grate.cm/grate/report.html?site=301708&url=https://app.grate.cm/grate/builder/301708#/">report here.</a>
</p>
<p class="poweredby-text">This site was built with SEMTotal.</p>
</div>
How to link to a <div> on another page? was showing how to Link text to a div id, but what I am looking to do is write one web page that is linked from other pages but hides all content but what the link id says to show. o page1 link to infopage.html with content A visible and page2 link to infopage.html with content B visible, page3 link to infopage.html with content C visible and so on. using plain HTML, CSS and vanilla JavaScript. no jQuery please; trying to learn how this would tie together. hope I explained this well enough
One option is to use the :target selector.
You hide all the content in CSS with the use of display: none;. Then you can show the content when the link is clicked by using *:target { display: block; }
If you want to load content from other websites, you can either use PHP include or iframe. However you cant show only specific parts of the website that easily. You would need to overwrite its default styling with the same emthod mentioned above.
main > div {
display: none;
}
main > div:target {
display: block;
}
/* For Styling Pupose only */
nav ul {
display: flex;
list-style: none;
}
nav li {
margin: 0 10px;
}
<nav>
<ul>
<li>Content A</li>
<li>Content B</li>
<li>Content C</li>
</ul>
</nav>
<main>
<div id="A">This is Content A</div>
<div id="B">This is Content B</div>
<div id="C">This is Content C</div>
</main>
Here's a quick and dirty way to make that happen:
all the articles are hidden by default
window.location.href.split('#')[1] will get you the anchor name
classList.remove('hidden') removes the hidden class from the selected article
page1.html
<style> .hidden { display: none; }</style>
<div id="article1" class="hidden"><h2>Article 1</h2></div>
<div id="article2" class="hidden"><h2>Article 2</h2></div>
<p>Go to Article 3</p>
<p>Go to Article 4</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>
page2.html
<style>.hidden { display: none; } </style>
<div id="article3" class="hidden"><h2>Article 3</h2></div>
<div id="article4" class="hidden"><h2>Article 4</h2></div>
<p>Go to Article 1</p>
<p>Go to Article 2</p>
<script>
document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>
Is there a way to not apply certain CSS classes to a particular class or id? I have an image in a grid using the Materialize CSS framework. I would like it to break outside the grid and reach the corners of the screen. Essentially I want to exclude the .container, .row, and the .col css styles from a class called .break-grid. However, I would still like other styles to apply. (in this case .parallax-container and .parallax.
Is there a better way to go about "breaking out of the grid" than the way I'm pursing? A pure CSS/HTML solution would be preferred but I am willing to use Javascript/Jquery to solve this as well.
Here is a code sample of what I'm trying to do. I have no CSS as this is a css framework (I do not want to edit the framework). I would need css to fix change it I presume.
<div class="container">
<div class="row">
<div class="col">
<!-- Apply here -->
<h1>Things</h1>
<!-- Don't apply here -->
<div class="parallax-container break-grid">
<div class="parallax">
<%= image_tag('infos/home/test_parallax.jpg')%>
</div>
</div>
<!-- Apply here -->
<h2>Stuff</h2>
</div>
</div>
</div>
You can use the :not() CSS pseudo-class. ( On MDN )
.container > .row > .col > *:not(.parallax-container) {
//styling
}
Note: realize this is a demonstration, I'm not going through every BootStrap property that would be applied innately, and you would have to do that yourself:
.container > .row > .col > *:not(.parallax-container) {
background: rgba(0,0,255,.5);
}
<div class="container">
<div class="row">
<div class="col">
<h1>Things</h1>
// Do not apply here
<div class="parallax-container break-grid">
<div class="parallax">
<span>whatever</span>
</div>
</div>
<h2>Stuff</h2>
</div>
</div>
</div>
Personally, I would advise you to listen to everyone else and just build this thing using Cascading styles. :not is an excellent tool, but I get the impression that you're likely to abuse it/over-rely on it and get yourself in a bind style-wise.
In any case, good luck!
I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.
I have tried both style="" inside the div and jquery. None of which works.
My HTML structure:
<!-- HEADER -->
<header id="header" class="header-left">
<div class="header-inner clearfix">
<!-- LOGO -->
<div id="logo" class="logo-left">
<a href="index.html">
<img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark#2x.png 2x" alt="Logo Dark">
<img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light#2x.png 1x, files/uploads/logo_light#2x.png 2x" alt="Logo Light">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="menu" class="clearfix">
<div class="menu-actions">
<div class="menu-toggle"><span class="hamburger"></span></div>
</div> <!-- END .menu-actions -->
<div id="menu-inner">
<nav id="main-nav">
<ul>
<li>xxx
</li>
<li>xxx
<ul class="sub-menu">
<li>xxx</li>
<li>xxxx</li>
<li>xxx</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<span class="pseudo-close header-close"></span>
</header>
Ok so before I show the source, here is what works:
<style>#logo img{opacity:0;visibility:hidden;}</style>
Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work. Example:
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
I then tried jQuery to hide the logo as a test. This did not work at all. Example:
<script src="files/js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#logo").css({
display: "none",
visibility: "hidden"
});
$("#logo").hide();
</script>
What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?
style="#logo img{opacity:0;visibility:hidden;}"
This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.
When setting an element's style attribute, you only need to write the style properties. This is how it should look:
style="opacity:0;visibility:hidden;"
Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.
A few notes:
Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
You can just write $('#logo').hide();, no need to the whole $("#logo").css({ section.
You can shorthand $(document).ready(function(){ to just $(function() {
Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;
You can't write inline style to another element.Inline styles are applicable to the element itself.
This is the right way
<style>#logo img{opacity:0;visibility:hidden;}</style>
This is not possible
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
Try
section #logo img{opacity:0;visibility:hidden;}
I have a navbar that uses anchor links to connect to different divs. I have all the div's hidden, but I want them to show based on what link you click.
<!-- NAV CONTAINER -->
<div class="navContainer">
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Overview</li>
</ul>
</nav>
</div>
<!-- DIV CONTAINER -->
<div class="container">
<div class="sections" id="home">
homepage with title here
</div>
<div class="sections" id="page1">
page 1
</div>
</div>
I know you can do it using jQuery but I haven't been able to make anything work. Right now the divs are set to display:none. 'Home' should appear when you load the site.
One possible solution is to use the css pseudo-selector :target
.sections {display:none;}
.sections:target {display:block;}
Demo
CSS3 selectors are pretty well supported but :target can give odd or buggy behaviour as mentioned here: http://css-tricks.com/on-target/
If you want to control it with jQuery... try it: http://jsfiddle.net/luiggi/kRgt6/
$(document).ready(function () {
$("li.home").click(function () {
$("#home").toggle();
$("#page1").hide();
});
$("li.overview").click(function () {
$("#page1").toggle();
$("#home").hide();
});
});
You'll likely need to add some sort of CSS class to the anchor links so you can find the specific triggers more easily.
Just from memory, the code will be something like this (assuming anchors have the "ToggleDiv" class name).
$('.ToggleDiv').each(function(el){
var divId = $(el).attr("href");
$(el).click(function(){
$(divId).Toggle();
});
})