Wordpress sidebar positioning on page and post - javascript

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%;
}

Related

making a responsive navigation bar

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")
})

How to fix a Lightbox gallery overlaying the site's header?

I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing.
In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.
I will provide the HTML and CSS I made to put the header and in their place.
I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.
The HTML of the header:
<header>
<ul>
<li>Home</li>
<li>Shiatsu</li></strong>
<li>Terapia Holística</li>
<li>Terapia com Cristais</li>
<li>Pantaloterapia</li>
</ul>
</header>
The HTML of the gallery:
<div class="gallery">
<img src="images/holistica/1.jpeg">
<img src="images/holistica/2.jpeg">
</div>
The CSS of the header:
header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100px;
width: 100%;
background: #f9f3ff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}
The CSS of the gallery:
.gallery img {
width: 100%;
max-width: 230px;
height: 230px;
margin: 10px 10px 0 0;
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover {
filter: grayscale(0);
transform: scale(1.1);
}
I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/
I used the lightbox-plus-jquery.min.js.
How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?
It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.

JS not working after doing custom css on Wordpress Site

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

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