making a responsive navigation bar - javascript

I have just started learning javascript and i've come across this problem.The problem is i'm making a resposive layout and i want to show the navbar moving from right to left when i click menu button but i cant seem to do that.I have watched different tutorials and tried bunch of things but none of them seem to work. I was hoping someone could help me in this.
here's my css for the navbar
.navbar{
display: block;
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 90vw;
max-width: 400px;
padding: 70px 0;
background-color: lightskyblue;
transition: all ease 200ms;
.toggle{
box-shadow: -2px 2px 20px black;
left: 0%;
}
and here's the script i have written
const nav = document.querySelector('.navbar')
const menuBtn = document.querySelector('.menu--active')
const closeBtn = document.querySelector('.menu--close')
menuBtn.addEventListener('click',()=>{
nav.classList.add("toggle")
})
Sorry for asking such a simple question.

well everything is good you are not removing the toggle class on clicking the close button so:
closeBtn.addEventListener('click',()=>{
nav.classList.remove("toggle")
})

Related

Wordpress sidebar positioning on page and post

for a few hours now I'm trying to solve a problem I encounter with the standard sidebar on my localy hosted wordpress site.
The code of my sidebar is the following:
CSS in the Customizer:
function mySlide(){
var x = document.getElementById("sidebar");
var y = document.getElementById("slider");
if(x.style.right === "0px"){
x.style.right = "-305px";
y.src = "arrow_left.png";
}else{
x.style.right = "0px";
y.src= "arrow_right.png";
}
}
#sidebar{
background-color: #571e0b;
padding: 0px 0px 0px 20px;
position: fixed;
top: 50px;
right: -305px;
height: 100%;
width: 300px;
transition: 0.5s;
-webkit-transform: 0.5s;
z-index: 2;
}
#slider {
padding: 10px;;
height: 50px;
position: relative;
left: -65px;
background-color: #571e0b;
border-radius: 0px 0px 0px 15px;
}
<div id="sidebar">
<input alt="slider_button" id="slider" type="image" onclick="mySlide()" src="arrow_left.png">
</div>
This kind of sidebar is positioned on posts and pages. However, the difference between the right attribute of #sidebar on pages and on post is 75px and I can't find a reason to.
The only clue I could find so far is, that it has something to do with pages being fullwidth and blogs being not.
Other characteristics of my website:
Theme: Themify Ultra v1.99
Plugins: Contact Form 7, Themify Portfolio Post, WP Super Cache
What i tried so far:
deleting everything on the affected pages.
reinstalling the theme and plugins
Would marry someone for a solution...
Kind regards
The Solution i found is a workaround with CSS. I set all pages to being not full width, and afterwards I used CSS to tell the container to resize.
It's as simple as:
#content{
width: 80%;
}

Button behind text only on mobile

I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}
You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute
The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}

adjusting Pop up window position based on page scroll position and closing by clicking out.

So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

jcarousel width issue

I'm using jCarousel on a website I'm creating for my company. I'm using the default javascript that came with jCarousel.
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px;width: 2084px;">
The width is being generated by the javascript that jCarousel came with but I can cypher though it to figure out where to change the value.
Any help would be great.
Here is a link to what I'm working on: http://marcbrigham.com/lynxems/index.html
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
Taken from the default Tango skin that´s used in the examples.
What skin/theme/CSS are you using? jCarousel needs to change the width to enable the slide but the wrapper element should be using overflow: hidden;.
UPDATE
This CSS edit makes it look OK but if you need it to cover the whole width of #mainhome you should consider changing the size of the images.
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 765px;
padding: 20px 40px;
height: 200px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 775px;
height: 190px;
}
Another option could be adding margin: 0 40px; to .jcarousel-skin-tango .jcarousel-clip-horizontal.
You can also create a CSS style and add !important to it, which will override the inline styles. For example:
#carousel {
width: 1000px !important;
}
While this works, I'm finding that if the container is too wide, you'll be able to scroll beyond just the items within it. I'm still looking for a workaround for this.
There's also a new version (0.3.0) but there aren't any really good examples on the developers site yet.
just add a style to your css:
.jcarousel-list-horizontal {width: x}
Al

Categories