I am creating a single page website with a fixed navigation. Within the navigation there are two containers, the one on the left contains a series of headers that change as you click the links on the right. I am setting the display on each of the classes containing the headers to 'none' and attempting to display them with Jquery when you click the links on the right. But nothing I am trying is working. Is it possible to get a smooth transition using the fade element and Jquery to achieve a series of headers that change upon clicking the links?
Here is my code:
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left">
<div class="header001"><h1>Doug Peterson</h1></div>
<div class="header002"><h1>About Us.</h1></div>
<div class="header003"><h1>Practice Areas.</h1></div>
<div class="header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
Help the student.
Here is a basic working version of what it sounds like you want. You will need to style it to look the way you want, but the behavior (showing/hiding divs on click of the menu) is there. You might think about changing the naming scheme for hrefs and divs to make it easier to select the header div based on the link clicked.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<style>
.header{
display: none;
}
</style>
<script>
$(document).ready(function() {
var selected = '';
$( "a", "#headerLinks" )
.on( "click", function(){
var divCls = ".header00" + $( this ).attr( "href" ).substring($( this ).attr( "href" ).length -1 );
if( selected.length > 0 ){
$( selected, "#headers" )
.hide('fade', function(){
$( divCls, "#headers" )
.show('fade');
});
}else{
$( divCls, "#headers" )
.show('fade');
}
selected = divCls;
});
});
</script>
</head>
<body>
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div id="headerLinks" style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left" id="headers">
<div class="header header001"><h1>Doug Peterson</h1></div>
<div class="header header002"><h1>About Us.</h1></div>
<div class="header header003"><h1>Practice Areas.</h1></div>
<div class="header header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
</body></html>
Related
I have a question regarding nested divs and applying classes. In my project I have a div with an id of "content" and inside it a div with an id of "imagewrap" which itself contains and image and some other elements. Here is the html:
<div id="content">
<div id="imagewrap" class="notVisible">
<img src="Images/Image1.jpg" id="front" />
<div id="previous" class="buttons" onclick="change(-1);"></div>
<div id="next" class="buttons" onclick="change(1);"></div>
</div>
</div> <!-- end of content -->
I want that image to fade in so I have added a class of "notVisible" to the div "imagewrap" and I got some jQuery removing this class and adding a class of "visible" after a delay. js and css:
css
#content {
height: 100%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;}
#imagewrap{
position: relative;
z-index: 5;
display: inline-block;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;}
.notVisible {
opacity: 0;}
.visible {
opacity: 1;
transition: opacity 0.7s ease-in-out;}
js:
function showPicture() {
$( "#imagewrap" ).removeClass( "notVisible" );
$( "#imagewrap" ).addClass( "visible" );
}
setTimeout(showPicture, 7000);
This works as expected. Just to test, I have tried adding the class "notVisible" to the div "content" instead and changing the function showPicture() like so:
function showPicture() {
$( "#content" ).removeClass( "notVisible" );
$( "#content" ).addClass( "visible" );
}
and this also works with the image fading in.
The problem I encounter is that I want now to restructure my html by nesting my "content" div in a tag with an id of "container", like so:
<section id="container">
<div id="content">
<div id="imagewrap" class="notVisible">
<img src="Images/Image1.jpg" id="front" />
<div id="previous" class="buttons" onclick="change(-1);"></div>
<div id="next" class="buttons" onclick="change(1);"></div>
</div>
</div> <!-- end of content -->
</section> <!--end of container-->
and when I do this, the image stops fading in. I have tried applying the class of "notVisible" to the "container" div instead and changing the showPicture() function accordingly and it doesn't work. Why is this not working? Thanks for your time.
Read this post What is the difference between <section> and <div>?
section is not a generic element. Replace your section with a div and it should work.
<div id="container">
<div id="content">
<div id="imagewrap" class="notVisible">
<img src="Images/Image1.jpg" id="front" />
<div id="previous" class="buttons" onclick="change(-1);"></div>
<div id="next" class="buttons" onclick="change(1);"></div>
</div>
</div> <!-- end of content -->
</div> <!--end of container-->
I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}
In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)
change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}
Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.
I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point.
I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "withinId" jQuery selector.
I'm posting the latest jQuery I attempted (with just 2 out of the 5 variables I will need to make work here). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.
(abbreviated) HTML:
<div id="welcome">
<div class="title-bar">
<p>WELCOME</p>
</div>
</div>
<div id="global">
<div class="title-bar">
<p>GLOBAL ENGAGEMENT</p>
</div>
</div>
<div id="community">
<div class="title-bar">
<p>COMMUNITY</p>
</div>
</div>
<div id="resources">
<div class="title-bar">
<p>RESOURCES</p>
</div>
</div>
<div id="horizon">
<div class="title-bar">
<p>ON THE HORIZON</p>
</div>
</div>
CSS:
.title-bar {
padding: 5px;
position: relative;
}
.title-bar.sticky {
position: fixed;
top: 111px;
width: 100%;
z-index: 1040;
}
jQuery:
$(document).ready(function() {
var welcomeTitle = $('#welcome .title-bar');
var globalTitle = $('#global .title-bar');
var communityTitle = $('#community .title-bar');
var resourcesTitle = $('#resources .title-bar');
var horizonTitle = $('#horizon .title-bar');
var stickyOffset = $('#header').offset().top;
if ($w.scrollTop() > stickyOffset + 225) {
welcomeTitle.addClass('sticky');
globalTitle.addClass('sticky');
} else {
welcomeTitle.removeClass('sticky');
globalTitle.addClass('sticky');
}
if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
welcomeTitle.removeClass('sticky');
} else {
//
}
});
jsBin demo
Give your "pages" a class="page" and listen for their positions using JS's Element.getBoundingClientRect on: DOM Ready, window Load, window Scroll
$(function() { // DOM ready
var $win = $(window),
$page = $(".page").each(function(){
// Memorize their titles elements (performance boost)
this._bar = $(this).find(".title-bar");
});
function fixpos() {
$page.each(function(){
var br = this.getBoundingClientRect();
$(this._bar).toggleClass("sticky", br.top<0 && br.bottom>0);
});
}
fixpos(); // on DOM ready
$win.on("load scroll", fixpos); // and load + scroll
});
*{box-sizing: border-box;}
html, body{height:100%;}
body{margin:0;font:16px/1 sans-serif; color:#777;}
.page{
position:relative;
min-height:100vh;
}
.title-bar {
position: absolute;
top:0;
width: 100%;
background:#fff;
box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.title-bar.sticky {
position: fixed;
}
#welcome {background:#5fc;}
#global {background:#f5c;}
#community{background:#cf5;}
#resources{background:#fc5;}
#horizon {background:#5cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome" class="page">
<div class="title-bar">
<h2>WELCOME</h2>
</div>
</div>
<div id="global" class="page">
<div class="title-bar">
<h2>GLOBAL ENGAGEMENT</h2>
</div>
</div>
<div id="community" class="page">
<div class="title-bar">
<h2>COMMUNITY</h2>
</div>
</div>
<div id="resources" class="page">
<div class="title-bar">
<h2>RESOURCES</h2>
</div>
</div>
<div id="horizon" class="page">
<div class="title-bar">
<h2>ON THE HORIZON</h2>
</div>
</div>
Design-wise > add a padding-top to the first container element (inside your .page) to prevent content going underneath the title element (since it toggles from absolute/fixed positions).
Have a look at the Waypoints plugin.
You can probably make it a little easier on yourself by assigning each section a class and then add and remove the class from each section with jquery each function.
Try something like the following:
$(window).on( "scroll", function() {
$( ".section" ).each(function() {
if ( $(window).scrollTop() >= $(this).offset().top - 50 ) {
$( this ).addClass("sticky");
}else{
$( this ).removeClass("sticky");
}
});
});
Then your css
.section{
height: 200px;
background: #333;
border:1px solid #222;
position:relative;
}
.section .title-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:50px;
}
.section.sticky .title-bar {
position:fixed;
}
And html
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
I have some reveal slideshow that I need to convert to a single page html. I've used jQuery to strip the code of all the reveal.js added classes, javascript, and stylesheets. For some reason, when I resize the page, a style is added to the div that hides half the content.
My code before resizing:
<div id="body">
<div id="slides-body">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
My code after resizing:
<div id="body">
<div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
Why is this happening? How can I fix it?
That is not the default behavior, there must be a window resize event as pointed by #Bas Van Stein delegated in the code causing that.
To fix, it you can just remove the attr "style" from the target div.
<script>
$().ready(function(){
$( window ).resize(function() {
$("#slides-body").removeAttr("style");
});
});
</script>
Example : http://jsfiddle.net/mzg2zk48/2/
crop_popup_box
<div id="crop_box" class="popup_box crop_popup">
<span class="popup-title" id="popup_title">Crop Image</span>
<div id="crop_div" style="display:none;">
<div style="margin-left:60px;" class="example">
<div class="default">
<div class="cropMain"><div class="crop-container" style="width: 320px; height: 320px;"><div class="crop-overlay" style="z-index: 6000; top: 0px; left: 0px;"></div><img class="crop-img" src="./jQuery & Canvas Image Cropper_files/one.jpg" style="z-index: 5999; top: -149.8px; left: -622.6650049850448px; width: 1402.7676969092722px; height: 549.6px;"></div></div>
<div class="cropSlider horizontal"><a style="left: 43%; z-index: 1;"><div class=""></div></a><input type="hidden" name="" value="2.29"></div>
</div>
</div>
</div>
</div>
script.js
$(function() {
$( ".popup_box" ).draggable();
});
I had applied draggable property to this crop popup.I am able to drag the entire popup.Is it possible to restrict the draggable function for class cropSlider horizontal in div.If the use click on div cropSlider horizontal and drag the popup should not get drag,because i am using a zoom bar in that div.While using the zoom bar the popup gets dragging and not able to zoom the image.
I tried this,
$('div.cropSlider').draggable( "disable" )
It is not working.Need help
You can also disable later on, when required:
$('div.cropSlider').draggable();
$('div.cropSlider').draggable( "option", "disabled", true );
Try to use:
$('.popup_box div.cropSlider').draggable({disabled: true});
use:
$(".popup_box").children('.cropSlider').draggable({disabled:true});