I've got an amazing navbar design (in my opinion). But there’s one problem! When I add other .html pages het animation isn’t showing on the next .html page. I know that the browser does not remember previous activity on the page before so the animation resets... Is there a way I can apply the animation on all 4 .html pages? So when clicking contact it will swipe to contact and stays on contact and does not reset to the default first one?
<div class="main">
<a href="#about"><span class="menu m1">ABOUT</span>
<a href="#contact"><span class="menu m2">CONTACT</span>
<a href="#home"><span class="menu logo">
<img src="TBGFXLOGO2019NBG.png" width="100px"/>
</span>
<a href="#portfolio"><span class="menu m3">PORTFOLIO</span>
<a href="#order"><span class="menu m4">ORDER</span>
<span class="active"/>
body {
margin: 0px;
padding: 0px;
background-color: #232323;
}
.main {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.menu {
width: 100px;
height: 30px;
font-family: 'Stroud';
font-size: 20px;
color: white;
padding: 0px;
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 0.3s ease-in;
}
.active {
width: 100px;
height: 30px;
background-color: white;
position: absolute;
top: 33px;
left: 0px;
transform: skewX(20deg);
z-index: -1;
transition: all 0.3s ease-in;
}
.m1 {
color: black;
}
.logo {
position: relative;
top: initial;
margin: 0px 30px;
}
a {
display: inline-block;
}
$(document).ready(function(){
$(".m1").click(function(){
$(".m1").css({'color':'black'});
$(".m2, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'0px','transform':'skewX(20deg)'});
});
$(".m2").click(function(){
$(".m2").css({'color':'black'});
$(".m1, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'100px','transform':'skewX(20deg)'});
});
$(".m3").click(function(){
$(".m3").css({'color':'black'});
$(".m1, .m2, .m4").css({'color':'white'});
$(".active").css({'left':'359px','transform':'skewX(-20deg)'});
});
$(".m4").click(function(){
$(".m4").css({'color':'black'});
$(".m1, .m2, .m3").css({'color':'white'});
$(".active").css({'left':'461px','transform':'skewX(-20deg)'});
});
});
You should get #hash from your url, once link is clicked. Than in your JS you compare your hash with your menu items. When these two are the same, add class to menu item, like active or so, and give active class any animation you want.
//TO GET THE HASH VIA JS
$(".main a").click(function(event){
event.preventDefault();
var hash = window.location.hash;
$(".main a").each(function(){
var curr = $(this);
if (hash == $(this).attr("href")) {
$("span", curr).addClass("active");
}})
}
Related
I am working on a project for an upcoming exhibition and need your help with some of the script. I used jQuery to implement a transition on click for the images and it works really well.
Now I want to implement some kind of lightbox gallery which enlarges the images on a second click on a specific image. Afterwards, when clicked anywhere but the enlarged image the lightbox gallery should close. All I know it that I need another onClick event in jQuery... but honestly I am pretty lost!
I hope someone can help me here.
This is the code I use right now:
jQuery(document).ready(function($){
$('ul.cards').on('click', function(){
$(this).toggleClass('transition');
});
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>
im not sure enough, but I just tried, maybe the meaning is more or less like this.
I change ul.card to double click, so that the image can also be clicked.
if you use second way maybe there will be less coding no need to use function if ($ ('li.card'). css ('transform', 'scale (1)')) on javascript,
but I can't use second way, maybe because it's css on element
.li there is have a transform property.
jQuery(document).ready(function($){
$('ul.cards').on('dblclick', function(){
$(this).toggleClass('transition');
$('li.card').css("transform","");
/* $('li.card').removeClass('transformation'); -- second way*/
$('li.card').off('click'); //delete the event listener click from li.card, so that when the collapsed cant be clicked
if ($('ul.cards').hasClass('transition')){
$('li.card').on('click', function(){
/* $(this).toggleClass('transformation');
-- second way */
if ($('li.card').css('transform','scale(1)'))
{
$(this).css('transform','scale(1.5)');
} else {
$(this).css('transform','scale(1)');
}
});
}
});
});
$(document).mouseup(function (e) { // when clicked anywhere the image close/back to default scale
if ($('ul.cards').hasClass('transition')){
if ($(e.target).closest('li.card').length
=== 0) {
$('li.card').css('transform','scale(1)');
}
}
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
/* &.transformation {
transform: scale(1.5);
} -- second way */
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards" id="cardsParent">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li id="card-1" class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>
<div style="height:100px;background-color:grey;color:white;text-align:center;">
click here or anywhere for close/change to default image
</div>
u can see in this link
https://jsfiddle.net/Lzp74drj/2/
I hope this is useful.
I've got no solution to this, I've tried multiple things but it will not work! I'm new to javascript so please, someone help me out!
What I want: The animation on all pages. The #about will be later linked as about.html, so when clicked, the pages will redirect from index- to about.html. But when I click the animation will it not apply? I want to see the animation on all the pages!
$(document).ready(function(){
$(".m1").click(function(){
$(".m1").css({'color':'black'});
$(".m2, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'0px','transform':'skewX(20deg)'});
});
$(".m2").click(function(){
$(".m2").css({'color':'black'});
$(".m1, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'100px','transform':'skewX(20deg)'});
});
$(".m3").click(function(){
$(".m3").css({'color':'black'});
$(".m1, .m2, .m4").css({'color':'white'});
$(".active").css({'left':'359px','transform':'skewX(-20deg)'});
});
$(".m4").click(function(){
$(".m4").css({'color':'black'});
$(".m1, .m2, .m3").css({'color':'white'});
$(".active").css({'left':'461px','transform':'skewX(-20deg)'});
});
});
body {
margin: 0px;
padding: 0px;
background-color: #232323;
}
.main {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.menu {
width: 100px;
height: 30px;
font-family: 'Stroud';
font-size: 20px;
color: white;
padding: 0px;
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 0.3s ease-in;
}
.active {
width: 100px;
height: 30px;
background-color: white;
position: absolute;
top: 33px;
left: 0px;
transform: skewX(20deg);
z-index: -1;
transition: all 0.3s ease-in;
}
.m1 {
color: black;
}
.logo {
position: relative;
top: initial;
margin: 0px 30px;
}
a {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<a href="#about"><span class="menu m1">ABOUT</span>
<a href="#contact"><span class="menu m2">CONTACT</span>
<a href="#home"><span class="menu logo">
<img src="TBGFXLOGO2019NBG.png" width="100px"/>
</span>
<a href="#portfolio"><span class="menu m3">PORTFOLIO</span>
<a href="#order"><span class="menu m4">ORDER</span>
<span class="active"/>
</div>
I am trying to create the effect of a navigation bar having its text change color on scroll. the problem is that once you start scrolling, the hover effect done with css does not work anymore.
Does anyone know how to fix this?
This is my code:
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 600) {
$(".normalmenuitem").css('color', '#a9a9a9');
} else {
$(".normalmenuitem").css('color', '#5f666f');
}
});
});
body {
min-height: 4000px;
}
.box {
background-color: #fff;
position: absolute;
height: 59px;
width: 100%;
top: 0;
}
.navigationmenu {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
}
#logo {
transform: translateY(-50%);
position: absolute;
top: 29px;
left: 17px;
width: 160px;
}
/* top right menu! */
.holderrr {
position: absolute;
top: 10px;
right: 0px;
}
.rightmenu {
display: inline-block;
text-decoration: none;
text-align: center;
font-family: sourcesanspro-semibold;
font-size: 15px;
padding: 6px 17px 6px 17px;
}
.normalmenuitem {
padding: 6px 17px 6px 17px;
text-decoration: none;
color: #5f666f;
transition: .3s color;
}
.normalmenuitem:hover {
color: #292f36;
}
#trial {
color: #e16065;
}
#trial:hover {
color: #d64f54;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationmenu">
<div class="box"></div>
<div class="nav">
<a href="http://braemo.com">
<img id='logo' src="http://images8.webydo.com/92/9273203/3958%2f4F9144FD-A273-B76D-94C9-3D8B569C8993.png">
</a>
</div>
<div class="holderrr">
<div class="rightmenu">
<a class="normalmenuitem" href='http://braemo.com/support.html'>Features</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Pricing</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Stories</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Blog</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Language</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Support</a>
<a class="normalmenuitem" href='http://dashboard.braemo.com'>Log In</a>
<a class="rightmenu" id="trial" href='http://braemo.com/pricing.html'>Start Free Trial</a>
</div>
</div>
</div>
Your problem is that Jquery overrides the CSS, if you want your CSS to override Jquery again you have to use !important for example:
.normalmenuitem:hover {
color: #292f36 !important;
}
Here is a working example https://jsfiddle.net/jL2z8yy4/
I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.
You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});
Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});
Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ
I am using a simple toggle to open and close my mobile navigation. When the navigation loads is loads the phone width and show the nav when is should be hidden causing the page to load wider than the width. Plus I can't get the Nav Menu to stay on the page so when it gets clicked again it will close.
Here is what I have and I am not sure why the nav is showing then it has not been clicked.
#nav-ph {
position: absolute;
top: 100px;
right: 0px;
margin: 0px;
padding: 5px 0;
list-style: none;
z-index: 9999;
width: 100%;
}
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px;
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
.nav-btn-ph img {
margin: 20px 0px 0px 13px;
}
.main-nav-ph li {
padding:0 10px;
text-align: left;
text-decoration: none;
color: #FFF;
font-family: #m;
font-size: 24px;
}
.main-nav-ph li a {
color: #000;
text-decoration: none;
}
.main-nav-ph li a:hover {
color: #000;
}
$(function() {
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
function toggleDivs() {
var $inner = $("#nav-ph");
if ($inner.css("margin-right") == "-300px") {
$inner.animate({'margin-right': '0'});
$(".nav-btn-ph").html()
} else {
$inner.animate({'margin-right': "-300px"});
$(".nav-btn-ph").html()
}
}
$(".nav-btn-ph").bind("click", function(){
toggleDivs();
});
});
<div id="nav-ph">
<div class="nav-btn-ph">Nav Menu</div>
<ul class="main-nav-ph">
<li>THE ADVANTAGE
</li>
<li>OUR SERVICES
</li>
<li>OUR TEAM
</li>
<li>MAKING NEWS
</li>
<li>CONTACT
</li>
</ul>
</div>
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/vb3v5/1/
If I understood correctly, try to remove the following items
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px; //remove this css, the nav emnu will stay longer
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
better remove this animation code to stay within the margin
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
Check this JSFiddle