I have a navigation function that has two parts, the first function don't work but the 2nd does.
https://jsfiddle.net/f7Lnthm1/
if you scroll down you will see the navigation fade in on scroll.. what i am trying to accomplish is have the same links show with no background color, and then when you scroll down the links scroll up with the web site then the same links fade in with the black navbar.
<div id="menu" style="display: block;">Top Bar</div>
<header id="header-active">
<ul>
<li>Nav links</li>
</ul>
</header>
<div id="hero"></div>
<div style="height: 600px;">section 1</div>
Jquery
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 300) {
$('#header-active').fadeIn(500);
} else {
$('#header-active').fadeOut(500);
}
});
});
})(jQuery);
Do you mean something like this?
https://jsfiddle.net/f7Lnthm1/3/
Basically, I split up the CSS for #header and the active version of it. You can use CSS for the animations (better to do this than JQuery anyway.
CSS:
#header {
width:100%;
height:75px;
color: #000;
z-index:9999;
background: none;
}
#header.active {
position:fixed;
top:0px;
background:#000;
color: #fff;
transition: all ease-in-out 500ms;
}
Then in the JS:
if ($(this).scrollTop() > 200) {
$('#header').addClass('active');
} else {
$('#header').removeClass('active');
}
That obviously pushes the aqua box down, if you want it just to match, setting the background color of #header to background: aqua instead of none like I've done would work: https://jsfiddle.net/f7Lnthm1/6/ I also removed the margin-top from the ul inside #header so the aqua butts up against the red.
If you want it to sit on top of the aqua box, then you would want to set the position of #header to absolute: https://jsfiddle.net/f7Lnthm1/5/
Related
I shall preface this by apologising for my horrendous code.
I have a "meet the team" page with a list of names on the right and information on the left. There is a div containing a biography on the left with the following CSS rules applied:
#bio
{
width:290px;
height:300px;
margin:15px;
font-size:18px;
color:#003399;
float:left;
transition:opacity 0.8s;
overflow-y:auto;
}
When you click on a new name, this text and other text will fade out. When invisible, the text is replaced with the swapText() function which changes the innerHTML of the divs and the divs fade back in again:
function fadeText(id)
{
var bio = document.getElementById('bio');
var name = document.getElementById('staffname');
var title = document.getElementById('stafftitle');
bio.style.opacity = 0;
name.style.opacity = 0;
title.style.opacity = 0;
setTimeout(function(){swapText(id);}, 1000);
setTimeout(function(){bio.style.opacity = 1;name.style.opacity = 1;title.style.opacity = 1;}, 1200);
}
In Chrome, if the biography is large enough to have a scrollbar with overflow-y:auto, then once the text is faded back in, the entire div disappears suddenly. The div disappears every time with overflow-y:scroll. This does not happen in Firefox.
If I add this code to the fadeText() function, then Chrome plays nice, but the transition ends up looking clumsy because of the scrollbar popping in and out.
bio.style.overflow = "hidden";
setTimeout(function(){bio.style.overflowY = "auto";}, 2000);
I have reproduced the bug here: https://jsfiddle.net/fqca5gsw/
Any advice would be greatly appreciated!
Just use flex , instead of float they are causing the problem the width of li element is taking the whole screen which is increasing the onClick()event area to happen
<div class="flex">
<div id="left">Short text</div>
<div id="right">
<li onclick="select(0);">Short text</li>
<li onclick="select(1);">Long text</li>
</div>
</div>
css
.flex {
display: flex;
}
#left {
display: block;
background-color: #F5F5F5;
width: 300px;
height: 300px;
transition: opacity 0.8s;
/* float: left; */
overflow-y: auto;
}
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:
<div class="product-description">
<div class="desc-wrap" itemprop="description">
<p>Material: wool
<br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
<br>Size: One size only
<br>Recommended for size SMALL
<br>It has been noted by customers that these skirts are short.
<br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
</p>
<p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
<p>WORLDWIDE SHIPPING!
</p>
</div>
<div class="desc-fade"></div>
<div class="open-link" style="display: block;">Expand Full Description</div>
</div>
I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?
Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/
css:
.product-description {
height:150px;
overflow: hidden;
position:relative;
}
.product-description.open {
height:auto;
overflow: hidden;
position:relative;
}
.desc-fade {
width: 200%;
margin-left: -50%;
height: 30px;
background: #fff;
z-index: 1;
position: absolute;
-webkit-box-shadow: 0 0 20px 30px #fff;
-moz-box-shadow: 0 0 20px 30px #fff;
box-shadow: 0 0 20px 30px #fff;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 250ms, 1s;
-moz-transition: opacity 250ms, 1s;
-o-transition: opacity 250ms, 1s;
transition: opacity 250ms, 1s;
}
.open-link {
position:absolute;
bottom: 15px;
z-index:2;
}
jquery:
$(function () {
var wrapHeight = $(".product-description .desc-wrap").height();
var descHeight = $(".product-description").height();
if (wrapHeight <= descHeight) {
$(".product-description .desc-fade").hide();
$(".product-description .open-link").hide();
}
$(".product-description .open-link").click(function () {
$(this).hide();
$(".product-description .desc-fade").hide();
$(".product-description").animate({
height: wrapHeight
}, 1000);
});
});
Does this works for you?
JSFIDDLE Demo
HTML
<div class="div-wrapper">
<div class="hider">
<p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
</div>
Show all
</div>
CSS
/* this first one is not necesary */
.div-wrapper {
width:300px;
border:solid 1px #000;
}
.div-wrapper>.hider {
height: 100px;
transition: ease-in-out all 0.2s;
overflow:hidden;
}
JQUERY
$(document).ready(function(e) {
$('.open-link').click(function(e) {
var $wrapper = $(this).parent().find('.hider');
$wrapper.css('height',$wrapper.find('p').height());
$(this).remove();
})
});
let me know if it's useful.
Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.
However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start
http://jsfiddle.net/2SMF2/2/
$('.expand').click(function () {
$('#test').removeClass('collapsed', 'fast')
$(this).remove();
});
How about this:
http://jsfiddle.net/VvBRh/
What I have done:
$('.open-link a').click(function(){
if($(".desc-wrap").css("height") == "60px") {
//Find auto height of div and save it
$('.desc-wrap').css('height', 'auto');
var autoHeight = $('.desc-wrap').height();
//Revert back to 2 lines
$('.desc-wrap').css('height', '60px');
//Animate to the saved autoHeight
$(".desc-wrap").animate({height: autoHeight}, 1000);
} else {
//Shrink back to 2 lines (you can remove this if you want)
$(".desc-wrap").animate({height: "60px"}, 1000);
}
return false;
});
You will also need to add a little css to get inital settings:
.desc-wrap { height: 60px; overflow: hidden }
I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 110)? innerHeight : "110px")
}, 500);
return false;
});
});
</script>
<style>
.view{
overflow:hidden;
height: 110px;
}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>
This page has some divs that jQuery makes into menus.
Here is the jsfiddle.
<div class="span-24 last">
<div class="span-5 last menu_button">
<ul id="item_menu" class="ui-menu">
<li class="ui-menu-item">Select Item Here
<ul id="item_menu_list" class="ui-menu" style="display:block; position:relative;"></ul>
</li>
</ul>
</div>
With these parameters:
$( "#item_menu" ).menu("collapseAll", null, true );
The menus are cleared and reset:
$('#item_menu').html("");
$('#item_menu').append("<li class=\"ui-menu-item\">Item Menu<ul id=\"item_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>");
then populated through a series of calls like this:
$('#item_menu_list').append("<li class=\"ui-menu-item\"><a class=\"ui-corner-all\" id=\"item_menu_list_item1\" href=\"#item1\">Item 1</a></li>");
.menu_button has the following .css:
div
{
color:#3079D9;
/* background:#4334ff; */
border-image-width:0px;
}
#menu
{
height:32px;
/* background:#00ccff; */
padding-top:10px;
padding-bottom:10px;
border-bottom: 1px solid #3079D9;
position: relative;
z-index:5000;
}
#menu div
{
position: relative;
vertical-align:middle;
z-index: inherit;
}
.menu_button {
/* padding:10px; */
position: relative;
vertical-align:middle;
/*z-index: inherit;*/
margin-top:0px;
color:#F2F2F2;
background: #5A86BF;
text-align:center;
border: 1px solid #3079D9;
border-image-width:0px;
}
The rest of the .css is drawn from Blueprints css or the jQuery-ui css.
I am using v.1.10.3 of the jQuery UI, and v1.10.2 of jQuery.
Whenever I mouse over the dropdown menus, a white space drops down, just like it should, but the text for the menu-items appears a full menu's-width to the right of the menu. Until a few days ago it was working just like it should. But when I switched from jQuery v.1.9.1 because my jQuery tooltips weren't working, my menus broke. Does anyone have any idea what's making this happen?
Let me know if you need any other information.
Modifications made to your fiddle
Added #item_menu_list {
width:188px; } to your CSS - (To make your menu links the same size as the menu.. You can modify it as you see fit.)
Removed all the classes from your appended li elements. When the menu activates it automatically adds these classes for you. There were some conflicts which were causing your issue.
Removed the class and style attributes from your item_menu_list element. <ul id="item_menu_list"></ul> the classes and style and automatically added by menu just like your appended elements.
Added a position attribute to your menu. $('#item_menu').menu({ position: { my: "bottom", at: "right-95 top-3" } }); This lets you adjust where the menu opens I made it so that it opens right below but you can experiment with it. $('#item_menu').menu(); defaults to the menu opening to the right.
Here is the fiddle.
http://jsfiddle.net/QP4BC/31/
Hope this helps you out.
http://jsfiddle.net/2hxmB/1/ - it's your question in jsfiddle.net, maybe someone help you. I'm didn't understand objective.
html:
<div class="span-5 last menu_button">
<ul id="world_menu" class="ui-menu">
<li class="ui-menu-item">Select World Here
<ul id="world_menu_list" class="ui-menu" style="display:block; position:relative;">
</ul>
</li>
</ul>
</div>
js:
$( "#world_menu" ).menu("collapseAll", null, true );
$( '#' + menuId ).append( "<li class=\"ui-menu-item\">" + defaultValue + "<ul id=\"world_menu_list\" class=\"ui-menu\" style=\"display:block; position:relative;\"></ul></li>" );
css:
body{background-color: #999;} .menu_button {/* padding:10px; */ position: relative; vertical-align:middle; /*z-index: inherit;*/ margin-top:0px;color:#F2F2F2;background: #5A86BF;text-align:center;border: 1px solid #3079D9;border-image-width:0px;}
got a code here from someone....
what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.
HTML
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
CSS
#loginPanel {
color: #000;
cursor:pointer;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
Jquery
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
$('#userNav').slideDown('fast');
} else {
$('#userNav').slideUp('fast');
}
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');
}
});
});
Please need help on this one. just to make the div slide right to left
here is the fiddle http://jsfiddle.net/7m7uK/195/
You can use jQueryUI and additional effects Slide
http://docs.jquery.com/UI/Effects/Slide
Example:
$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);
You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:
The .slideToggle() method animates the height of the matched elements.
This causes lower parts of the page to slide up or down, appearing to
reveal or conceal the items. If the element is initially displayed, it
will be hidden; if hidden, it will be shown.
You should try and change your code to implement this code, but I think it's maybe better if you try with #s15199d answer, than you don't need to use jQueryUI
Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:
http://jsfiddle.net/7m7uK/197/
Ok, created another fiddle with cookies
http://jsfiddle.net/7m7uK/198/
Without depending on JQuery-UI
You need to place the content <div> you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div> is to have its x-overflow set to hidden so that it hides the content <div>. You can then use jQuery's native animate() routine to set the right margin to 0 to make the content <div> appear with a horizontal sliding effect.
HTML:
<div id="slider-wrapper">
<div id="slider-content">
</div>
CSS:
#slider-wrapper {
overflow-x: hidden;
}
#slider-content {
width: 300px;
margin-right: -300px;
}
JavaScript:
$("#slider-button").click(function () {
$("#slider-content").animate({ "margin-right": 0 }, "slow");
});
Here's a demo that uses a handle <div> to expand and collapse a div:
http://jsfiddle.net/gingi/KUCaL/
SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT
<div class="nav ">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
CSS:
/*nav*/
.nav{
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-view{
transform: translateX(0);
}
JS:
$(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});
http://www.themeswild.com/read/slide-navigation-left-to-right
$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");
Have you tried this ?
if ($.cookie('panel') == 'open'){
$('#userNav').slideLeft('fast');
} else {
$('#userNav').slideRight('fast');
}