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();
});
})
Related
I want to scroll to a section on the page with vanilla JavaScript. Is the browser support good?
This is my code:
Document.getElementById("menu-item-1").on("click", function() {
Document.getElementById("services").scrollIntoView();
};
<a id="menu-item-1" href="#services">Click to Scroll to Services</a>
Then add services id where you want to scroll to.
<div id="services">Scroll Here</div>
Have You tried linking an id?
<h1 id="menu-item-1">Menu Item #1</h1>
<div>Go to Menu Item #1</div>
(The code above doesn't scroll because it is inside of a sandbox)
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;}
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>
i have a Menu in which when user selects from menu list it displays that div and rest are hidden i have a huge menu list is there any function such that it displays only that div Can Anyone help please....
HTML:
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
<div id="one"> Div one </div>
<div id="two"> Div two </div>
<div id="three"> Div three</div>
CSS:
div {
display:none;
}
li {
cursor:pointer;
}
JQuery:
$('li').click(function(){
$('div#' + $(this).attr('class')).show().siblings().hide();
});
This isn't a particularly well phrased question, but i'm thinking you want to give all your divs that can be shown a particular class, and give each ond an id:
<div class="revealPanel" id="panel1">
<!-- Content -->
</div>
<div class="revealPanel" id="panel2">
<!-- Content -->
</div>
<div class="revealPanel" id="panel3">
<!-- Content -->
</div>
<!-- etc. ... -->
You've tagged this query with jquery-ajax so I'm going to assume you know how to include jQuery in your page etc.. Define a javascript function to hide all divs and show a specified one:
function ShowPanel(panelId)
{
jQuery('.revealPanel').hide();
if (panelId != null)
{
jQuery(panelId).show();
}
}
And now just call that function from each of your menu links with the correct id, for instance:
<a href="javascript:ShowPanel('panel1');>Show Panel 1</a>
Of course I may have misinterpreted your question, and even if I haven't I encourage you to provide more detail in your questions — use code snippets to show how you've designed your menu etc.
Good luck!
Check out http://jqueryui.com/demos/draggable/
At the bottom there's a tabbed section. The seconds tabs "Details" gives the example of exactly what I want to accomplish. You can show/hide each row, and you can show/hide the details within that list row.
Is this part of the jQuery UI? If so, does anyone happen to know what it's called?
It is part of jQuery. It is just a simple hide and show on another div.
<div class="Control">Toggle</div>
<div class="Content" style="display: none;">Some content you want to toggle.</div>
<script>
$(".Control").click(function(){
$(this).next(".Content").toggle();
});
<script>
Your elements can change to anything you want, LI, IMG, DIV.
here is a simple accordion
if you don't want them all to hide. remove this line $('.contentblock').not(c).hide();
<ul id="accord">
<li>
title
<div class="contentblock">Content</div>
</li>
<li>
title2
<div class="contentblock">Content2</div>
</li>
</ul>
then ...
$(function () {
$('.contentblock').hide();
$('#accord').delegate('li > a','click',function () {
var c = $(this).parent().find('.contentblock').toggle();
$('.contentblock').not(c).hide();
})
});