Good day guys. I just wanna ask from you how can I make the pagination control box as shown in the image below appear.This will appear only when I hovered in the testimonial div. The control is along with the theme features(wordpress) and it seems it don't have the option to make it appear by default. I tried to apply styles Opacity:1 and Visibility:visible but these didn't work. I think it is on the javascript and I don't know how to trace down its code. This is the link of the site is http://67.222.16.144/~lasikoma/.
Any help would greatly appreciated.
<style>
.ether-ctrl-wrap {
display: block !important;
}
</style>
Add this style somewhere convenient.
Related
I want to have the "Kontakt" button in the right cornor at the front. So, this button is supposed to be above everything else. I already set the z-index to z-index: 99999999999 !important; but it doens't effect anything...
On desktop the button is above everything except the footer at the bottom. On mobile its a disaster... Its behind everything... Try yourself..
But why and how can I fix that? - Here the site: https://j-trier.de
Code:
<button onClick="location.href='#kontakt'" type="button" id="kontakt_button" class="cl-popup-trigger type_btn cl-btn">Kontakt</button>
Greetings
just put your button code direct inside of body tag.
You have used Z-index property in right way. But there is a problem in CSS file “us-base.min.css” . On class “l-canvas class” there is a property “overflow: hidden” which is making it invisible. So remove this property. If you want to use it so use it in such way ”overflow-x: hidden; overflow-y: visible;
Happy Coding!
I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive JS amateur but I've been using fullPage.js (https://github.com/alvarotrigo/fullPage.js/) to create a scrolling content area, and also used a small drop down jQuery within the FullPage. I set up a function to bring my darkness div to the foreground, and it covers the entire screen as I expected, however, the drop down list within the fullPage simply won't rise above it, no matter what I try.
CSS of the darkness div:
#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}
This is my JS function:
function thedarkside () {
console.log ('the dark side');
$('#darkness').fadeTo(200, 1);
}
All of that works as intended. However I can't get my drop down #dd to have a z-index higher than darkness div. This is the general structure of the FullPage.js:
Darkness -->
<-- Darkness
Fullpage -->
Section -->
Form -->
Dropdown -->
<-- Dropdown
<-- Form
<-- Section
<--Fullpage
I set the z-index of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want Dropdownto be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in JS as opposed to CSS.
Thanks,
Mike
It took the JSFiddles for me to discover why it wasn't happening. I had to turn off the css3 flag on start of the FullPage.js and now it works.
Hope this helps anyone else who experiences something similar.
before anything, this is my codepen, I am trying to pretty much hover over that and make it say about me. Ive tried a few things but it is just not clicking.
this is my link
http://codepen.io/willc86/pen/BrEmt
I was hoping someone can help explain to me how to change this to a solid background color (lets say all red) with font white saying "about me"
is it possible w/o JavaScript?
The trick is to apply the hover on something higher up.
You can't hover over something invisible. However, you can hover over the things which hold the invisible item.
So, instead of doing something like:
.hidden:hover { visibility: visible; }
Instead, put it on a parent element, like the li:
li:hover .hidden { visibility: visible; }
Now, when you hover over the li that contains the hidden item, the hidden item appears.
Now it's just a matter of tweaking that container to give you exactly what you want. =)
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.
I want to use split buttons for a left
side menu. I tried adding the class following.
<STYLE TYPE="text/css"> .catbutton { display: block; } </STYLE>
The buttons were the right width but the menu arrow was the section taking up
the variable width. Not only was it ugly but the menu activation section was in
the correct place on the far right. Clicking on the triangle which was floating
in the middle did not work.
I was thinking that maybe I could add a <br/> element after the button using JS. I am not having any luck.
Help is appreciated.
Try adding width: 95%; to the button style?